JavaScript 通过给定的图像制作笑脸动画

Question

我是 JavaScript 的初学者，我有一个问题，就像每 2 秒更改一次图像一样，我将数组用于 12 张图像和 for 循环，但它没有按照我想要的方式工作，变化来自直接从图1到图12，不移动整个12.

这是我的脚本

var images = new Array(11) , x=0;
images[0] = new Array();
images [0].src = "images/smile_01.gif";
images[1] = new Array();
images [1].src = "images/smile_02.gif";
images[2] = new Array();
images [2].src = "images/smile_03.gif";
images[3] = new Array();
images [3].src = "images/smile_04.gif";
images[4] = new Array();
images [4].src = "images/smile_05.gif";
images[5] = new Array();
images [5].src = "images/smile_06.gif";
images[6] = new Array();
images [6].src = "images/smile_07.gif";
images[7] = new Array();
images [7].src = "images/smile_08.gif";
images[8] = new Array();
images [8].src = "images/smile_09.gif";
images[9] = new Array();
images [9].src = "images/smile_10.gif";
images[10] = new Array();
images [10].src = "images/smile_11.gif";
images[11] = new Array();
images [11].src = "images/smile_12.gif";
function changeimage(){

setInterval( function ima(){ 
    for ( x = 0 ; x <= images.length ; x++ ){

        document.getElementById("imag").src= images[x].src;
    }

},1000);


}

HTML:
</head>
<body>
<img id = "imag" src="images/smile_00.gif" onload = "changeimage()">
</body>
</html>

Answer 1

您的整个循环发生在 setTinterval 内，但是为了使动画变得可见，您需要将循环的每次迭代放在 setInterval、

中

也正如评论中指出的那样，您的数组可以简化；

var images = [
  "images/smile_01.gif",
  "images/smile_02.gif",
  "images/smile_03.gif",
  "images/smile_04.gif",
  ...
];

var i = 0,
    image = document.getElementById("imag");
setInterval( function () { 
  if (i >= images.length) {
    i = 0;
  }
  image.src = images[i];
  i++;
},1000);

Answer 2

var images = new Array(11), x=0;
images[0] = "images/smile_01.gif";
images[1] = "images/smile_02.gif";
images[2] = "images/smile_03.gif";
images[3] = "images/smile_04.gif";
images[4] = "images/smile_05.gif";
images[5] = "images/smile_06.gif";
images[6] = "images/smile_07.gif";
images[7] = "images/smile_08.gif";
images[8] = "images/smile_09.gif";
images[9] = "images/smile_10.gif";
images[10] = "images/smile_11.gif";
images[11] = "images/smile_12.gif";

function changeimage(){

setInterval( function(){ 
  document.getElementById("imag").src = images[x];
  document.getElementById("imag").title = images[x];
  x++;
  if (x >= images.length)
  {
     x=0;
  }
},1000);
  }

<img id="imag" src="http://www.terrafloraonline.com/images/userfiles/images/flower01LOW.png" onload="changeimage()" title="start" />

您不需要循环。 setInterval itself is a loop. 每个时间间隔为运行（每秒）它在 x 上加 1。我已经更正了你的数组。如果你运行这个脚本，你可以将鼠标悬停在图像上。您会看到图像的标题每秒都在变化。在我的示例中，第一个图像只是一个占位符，用于使 onload 工作。如果你要使用这个，只复制代码。

Answer 3

我的方法是创建一个包含所有源 URL 的数组，如下所示：

var images = [
    "images/smile_01.gif",
    "images/smile_02.gif",
    ....
];

您可以使用循环来执行此操作：

var images = [];
for (var i = 1; i <= 12; i++) {
    images.push("images/smile_" + i + ".gif");
}

然后从DOM

中获取图像元素

var imag = document.getElementById("imag");

然后运行一个函数，它每 2 秒调用一次，更改图像，并增加一个计数器

function changeImage(i) {
   imag.src = images[i % images.length];
   setTimeout(function() {
       changeImage(i+1)
   }, 2000);        
};
changeImage(0);

奖励：在显示最后一张图片后，这再次从第一张图片开始

另请注意，除非您预加载图像，否则您可能至少会在每张图像第一次显示时出现白色闪烁。

JavaScript 通过给定的图像制作笑脸动画

JavaScript to animate a smily face by given images

javascript

arrays

image

function

setinterval