如何制作不间断循环？

Question

我在 div 中有一张图片，我希望它每 2 秒更改一次。

var i = 0, images = [];

images[0] = "https://cdn.pixabay.com/photo/2014/07/27/20/29/landscape-403165_960_720.jpg";
images[1] = "https://static.pexels.com/photos/36478/amazing";

function repeat() {
    $(".exch img").attr("src", images[i]);
    i = i + 1;
}
setInterval(repeat, 2000);

此代码可以很好地更改图片，但当它到达最后一张图片时，它会停止。关键是我希望循环重新开始并重复多次。

我还希望 images[0] 的 src 成为我本地磁盘 image/01.jpg 中的图像 src，而不是 http://wwww.example.com/01.jpg。

我该怎么做？

Answer 1

问题 i 处的代码递增到大于 images 数组 .length 处 i = i + 1;

的值

您可以使用 remainder 运算符 % 在 repeat 函数 [=21= 中将 i 设置为 0 或 1 ]

function repeat() {
  $(".exch img").attr("src", images[i]);
  i = ++i % images.length;
}

Answer 2

您已经使用 setInterval 在无限循环中运行处理它，但这里的问题是 images 数组中没有更多图像。 images 数组中只有两张图片，并且 setInterval 不断递增 i 值，但没有第三张或第四张图片。

您需要在到达最后一个 images 数组后将 i 值重置为 0... 这样 setInterval 将运行不停地和继续显示重复的图像。

var i = 0,
    images = [];
images[0] = "https://cdn.pixabay.com/photo/2014/07/27/20/29/landscape403165_960_720.jpg";
images[1] = "https://static.pexels.com/photos/36478/amazing";
function repeat() {
    if(i > images.length - 1) i = 0;
    $(".exch img").attr("src", images[i]);
    i = i + 1;
    console.log(i);
}
setInterval(repeat, 2000);

Answer 3

你的 var i 增加了你的图像[] 长度

尝试这样做$(".exch img").attr("src", images[i%images.length]);

第二个问题：

如果您运行 Html 在服务器上（例如 express、ror...）

我认为你不能从本地路径包含 img，

您需要将您的图像放在 public 路线上。

如何制作不间断循环？

How to make non-stopping loop?

javascript

jquery

loops

infinite-loop