Question

我是用JavaScript编写的，我有一个问题就像每2秒更换一次图像我使用12个图像的数组和循环但它没有按照我想要的方式工作，更改从图像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

我这样做的方法是创建一个包含所有源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);

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

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

Answer 2

你的整个循环发生在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 3

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工作。如果你打算使用它，只需复制代码。

JavaScript通过给定图像动画笑脸

3 个答案: