Question

如果没有使用最简单的图像旋转器，我怎样才能让它循环通过阵列？

 $(document).ready(function () {
     var source = ["images/designers1.jpg","images/designers2.jpg","images/designers3.jpg"];
     i=0;
     setInterval(function(){
         $('.dimg').attr('src',source[i++])
     }, 2000);
 });

Answer 1

这有效：

$(document).ready(function () {
     var source = ["http://dummyimage.com/300x200/FFF/F00&text=GoodBye","http://dummyimage.com/300x200/000/fff&text=Hello"];
     var i=0;
     setInterval(function() {
         $('.dimg').attr('src', source[i++ % source.length])
     }, 2000);
 });

工作演示：http://jsfiddle.net/jfriend00/QXyjS/

的变化：

每张图片只在阵列中一次。
数组的索引以数组的长度为模，因此它永远不会超过数组的长度
var被添加到i变量前面，因此它不是全局变量。

Answer 2

我认为你想要这样的东西：

 $(document).ready(function () {
     var source = ["images/designers1.jpg","images/designers2.jpg","images/designers1.jpg"];
     var idx = 0;

     function animate(idx) {
         idx++;
         if (idx >= source.length)
             idx = 0;
         $(".dimg").attr("src", source[idx]);
         setTimeout(function() {
             animate(idx);
         }, 2000);
     }
     animate(idx);
 });

[edit] setInterval很糟糕！使用递归setTimeout调用来避免一些令人讨厌的陷阱。还可以找到working example。

最简单的图像旋转器 - 使用SetInterval失败

2 个答案: