[英]How can I make this slide code snippet loop infinetly ( my current code is not working and I don't know where I'm making mistakes)
I have a JavaScript file with the following CODE: 我有一个包含以下代码的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();
This piece of code gets all the images from my directory and sets their path to an image element on the page. 这段代码从我的目录中获取所有图像,并将它们的路径设置为页面上的图像元素。
After that I call a function slideit() in the code which iterates through all the images and calls itself afterwards recursively through a call made by a setTimeout() function at every 4500 milliseconds. 之后,我在代码中调用一个函数slideit(),该函数遍历所有图像,然后每隔4500毫秒通过setTimeout()函数进行一次调用,以递归方式对其进行调用。
The problem is that it doesn't turn on again after it iterates through 4 of my images and it doesn't display the last one and I don't know how to solve this problem. 问题是,在遍历我的4张图像后,它不会再次打开,并且它不显示最后一张,而且我也不知道如何解决此问题。 Any advice of code example is welcome, thanks in advance ! 欢迎提供任何代码示例建议,谢谢!
@fuyushimoya helped me out solving the problem. @fuyushimoya帮助我解决了这个问题。 It seemed that inside the function I was checking step variable to see if it was higher than 5 and that made the function not working properly ... no everything is working fine and and step doesn't get the value 5 anymore which would of made it out of boundary at document.getElementById('slide').src = slideArray[step].src;
似乎在函数内部,我正在检查step变量以查看其是否大于5,这使该函数无法正常运行...一切工作正常,并且step不再获得值5它超出document.getElementById('slide').src = slideArray[step].src;
as he stated. 如他所说。
Thanks a lot @fuyushimoya for helping me on this one ! 非常感谢@fuyushimoya在这一方面帮助我! Million thanks ! 万分感谢!
You can use the length of the array for testing, like here with a reminder operator. 您可以使用数组的长度进行测试,例如此处使用提醒操作符。
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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.