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);

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

我还希望src的{{1}}成为我本地磁盘images[0]中的图片src，而不是image/01.jpg。

我该怎么做？

Answer 1

您已使用setInterval在无限循环中运行它，但问题是images数组中没有更多图像。 images数组中只有两个图像，setInterval保持递增i值，但没有第3或第4个图像。

在到达最后一个i数组后，您需要将0值重置为images ...以便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 2

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

您可以使用remainder运营商%将i设置为0或将1设置为repeat功能

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

Answer 3

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

尝试执行此操作$(".exch img").attr("src", images[i%images.length]);

第二个问题：

如果你在服务器上运行Html（比如express，ror ......）

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

你需要把你的形象放在公共路线上。

如何制作非停止循环？

3 个答案: