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

使用最简单的图像旋转器失败了，我如何才能让它在阵列中循环

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

---

我想你想要这样的东西：

 $(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

调用来避免一些令人讨厌的陷阱。也可以找到一个。

这样做：

$(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);
 });

工作演示：

变化：

每个图像仅在阵列中存在一次

数组的索引是对数组长度的模化，因此它永远不会超过数组的长度

var

添加在

i

变量前面，因此它不是全局变量

---

请告诉我们什么失败了？hmmmmmm@nietonfir我正在考虑一个循环，但是我只是删除了设置的间隔，因为它应该在自己的循环上运行，不是吗？为什么要设置多个

setInterval（）

调用。似乎不是任何人想要的。@rootsup With

setInterval

异步调用该函数。计时器不会等到函数完成后再重新启动。因此，如果对函数的任何调用花费的时间超过了计时器间隔，则至少会导致无序执行，并可能导致内存泄漏/性能问题（取决于函数中发生的情况）.jfriend00-%source.length是什么意思？

i%source.length

将

i

除以

source.length

，该表达式的值是除法运算的剩余部分。因此，如果

i

是

3

，那么它将是3/2的剩余部分，即1。这是一个常见的技巧，用于留在数组中并获取包装/重复值。在本例中，它将变成

0

，

1

，

0

，

1

，等等。。。有关

%

运算符，请参阅。