javascript - 我怎样才能使这个幻灯片代码片段无限循环(我当前的代码不起作用，我不知道我在哪里犯了错误)

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()，该函数会迭代所有图像，然后通过 setTimeout() 函数每 4500 毫秒进行一次调用来递归地调用自身。

问题是它在迭代 4 个图像后不再打开，并且不显示最后一张图像，我不知道如何解决这个问题。欢迎任何代码示例的建议，提前致谢!

Answer 1

您可以使用数组的长度进行测试，就像这里使用提醒运算符一样。

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" />