我如何使这个幻灯片代码片段无限循环(我当前的代码不工作，我不知道我在哪里出错)
我如何使这个幻灯片代码片段无限循环(我当前的代码不工作，我不知道我在哪里出错)
提问于 2016-02-25 15:39:16
我有一个包含以下代码的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个图像之后，不会再次打开，也不会显示最后一个，我也不知道如何解决这个问题。欢迎对代码示例的任何建议，谢谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-25 15:51:39
您可以使用数组的长度进行测试，如这里有一个提醒操作符。
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" />
Stack Overflow用户
发布于 2016-02-25 15:49:50
@fuyushimoya帮助我解决了这个问题。在函数内部，我检查步骤变量，看看它是否大于5，这使得函数不能正常工作。不，一切都很好，step不再得到5的值，就像他所说的那样，这使得它脱离了document.getElementById('slide').src = slideArray[step].src;的边界。
非常感谢@fuyushimoya在这件事上帮助我！百万谢谢！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35631772
复制相关文章
相似问题
腾讯云开发者
