我如何才能使此幻灯片代码片段无限循环（我当前的代码无法正常工作，并且我不知道自己在哪里犯错误）

Question

我有一个包含以下代码的JavaScript文件：

var slideArray = new Array();
slideArray[0] = new Image();
slideArray[0].src = "images/slide/1.jpg";
slideArray[1] = new Image();
slideArray[1].src = "images/slide/2.jpg";
slideArray[2] = new Image();
slideArray[2].src = "images/slide/3.jpg";
slideArray[3] = new Image();
slideArray[3].src = "images/slide/4.jpg";
slideArray[4] = new Image();
slideArray[4].src = "images/slide/5.jpg";

var step = 0;

function slideit() {
    if (!document.images)
        return;
    document.getElementById('slide').src = slideArray[step].src;
    if (step < 5)
        step++;
    else
        step = 0;
    setTimeout("slideit();", 4500);
}

slideit();

这段代码从我的目录中获取所有图像，并将它们的路径设置为页面上的图像元素。

之后，我在代码中调用一个函数slideit（），该函数遍历所有图像，然后每隔4500毫秒通过setTimeout（）函数进行一次调用，以递归方式对其进行调用。

问题是，在遍历我的4张图像后，它不会再次打开，并且它不显示最后一张，而且我也不知道如何解决此问题。 欢迎提供任何代码示例建议，谢谢！

Answer 1

@fuyushimoya帮助我解决了这个问题。 似乎在函数内部，我正在检查step变量以查看其是否大于5，这使该函数无法正常运行...一切工作正常，并且step不再获得值5它超出document.getElementById('slide').src = slideArray[step].src; 如他所说。

非常感谢@fuyushimoya在这一方面帮助我！ 万分感谢！

Answer 2

您可以使用数组的长度进行测试，例如此处使用提醒操作符。

 function slideit() { document.getElementById('slide').src = slideArray[step].src; step++; step %= slideArray.length; } var step = 0, slideArray = new Array(); slideArray[0] = new Image(); slideArray[0].src = "http://lorempixel.com/100/50/"; slideArray[1] = new Image(); slideArray[1].src = "http://lorempixel.com/100/51/"; slideArray[2] = new Image(); slideArray[2].src = "http://lorempixel.com/100/52/"; slideArray[3] = new Image(); slideArray[3].src = "http://lorempixel.com/101/50/"; slideArray[4] = new Image(); slideArray[4].src = "http://lorempixel.com/102/50"; if (document.images) { slideit(); setInterval(slideit, 4500); } 

 <img id="slide" width="100" height="50" />