如何使用Javascript播放一系列图像


How to play a sequence of images with Javascript

我正在尝试在javascript中播放一系列图像。我不知道如何开始,因为我几天前才开始学习Javascript。我一直试图为这个问题寻求帮助,但我没有运气。

我想这样:

  1. 用户单击按钮
  2. 该网站逐个播放一系列图像

这就是我现在拥有的:

http://thecodingninja.com/muslim/practice.php

当您按下"新信"按钮时,它会显示一封新信的图像。

我想知道如何在用户单击按钮时显示整个单词(字母序列):因此它将播放一系列图像来制作单词。

这是我想要的一个例子:

http://asl.ms

我不想要单词的水平、速度或长度,只是能够组成一个单词。

这里有一种方法。我假设您有一个带有 ID imageimg 标签和一个带有 ID text的输入字段,我从中选择要拼写的单词:

function setLetter(letter) {
  var img = document.getElementById("image");
  if (letter && letter.length == 1) {
    img.src = "http://thecodingninja.com/muslim/fingerspellingimg/"+letter+"abc.jpg";
  }
  else {
    img.src = "";
  }
}
function nextLetter(word) {
  if (word.length > 0) {
    var firstLetter = word.charAt(0);
    setLetter(firstLetter);
    setTimeout(nextLetter, 1000, word.substring(1));
  }
  else {
    setLetter();
  }
}
function spellWord() {
  var word = document.getElementById("text").value;
  nextLetter(word.toUpperCase());
}

setLetter()函数将为给定字母设置图像(假设它是大写的。更健壮的实现将检查它是否是我们已经有图像的角色)

nextLetter()函数将挑选出第一个字母,在图像中设置该字母,然后设置一个计时器,在 1000 毫秒后使用没有第一个字母的单词调用自己。

spellWord()函数将从输入字段中选择单词并调用nextLetter()来设置第一个字母并激活单词其余部分的基于计时器的拼写。

我使用这个JSBin来测试解决方案。