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

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/

变化：

1. 每个图像仅在数组中出现一次。
2. 数组的索引以数组的长度为模，因此它永远不会超过数组的长度
3. 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);
 });

[编辑]setInterval不好！使用递归setTimeout调用来避免一些讨厌的陷阱。还可以找到一个工作示例。