我正在尝试创建一个简单的幻灯片,其中包含3个旋转图像,这些图像将在最后一次显示时重新开始,相隔5000毫秒。
<div id="slideshow"> </div>
<script type="text/javascript">
var imageArray = ['Image1','Image2','Image3'];
var currentIndex = 0;
nextPic = function(currentIndex,slideshow) {
var theHTML = '<img src="http://www.domain.com/Pics/Test-' + imageArray[currentIndex] + '.jpg">';
document.getElementById("slideshow").innerHTML = theHTML;
if (currentIndex < imageArray.length) {
currentIndex = currentIndex + 1;
}
else {
currentIndex = 0;
}
setTimeout("nextPic(" + currentIndex + ")", 5000);
}
nextPic(currentIndex, "slideshow");
</script>
我发现的Javascript代码的每个变体都产生了相同的结果:在最后一个图像(Test-Image3.jpg)之后,JS尝试显示未定义的图像(“Test-undefined.jpg”),然后重置为第一个。除此之外,它的工作非常精细,而且非常令人发狂。
答案 0 :(得分:0)
您需要考虑这样一个事实:您在>>之后添加一个来检查数组的长度:
if (currentIndex < imageArray.length - 1) {
currentIndex = currentIndex + 1;
}
else {
currentIndex = 0;
}
或
currentIndex += 1;
if (currentIndex >= imageArray.length)
currentIndex = 0;
但是,您根本不需要传递参数,因为该函数只能使用全局变量。 (最好不要有一个,但是既然你做了,那么你也可以使用它。)
答案 1 :(得分:0)
更改为:
if (currentIndex < imageArray.length - 1) {
currentIndex = currentIndex + 1;
}
这是因为否则会尝试显示imageArray[imageArray.length]
。
此外,而不是:
currentIndex = currentIndex + 1;
你可以使用:
currentIndex ++;
答案 2 :(得分:0)
使用setInterval()的更清洁的实现:
var slide = function(){
//check if we are at the end of the array, either stop or replay.
if (currentIndex == imageArray.length){
currentIndex = 0; //replay slideshow
/*to stop slideshow add this:
* window.clearInterval(slideInt)
* return false;
*/
}
var theHTML = '<img src="http://www.domain.com/Pics/Test-' +
imageArray[currentIndex] + '.jpg">';
document.getElementById("slideshow").innerHTML = theHTML;
currentIndex +=1;
}
var imageArray = ['Image1','Image2','Image3'];
var currentIndex = 0;
var speed = 5000;
var slideInt = window.setInterval(slide,speed); //skip a photo every 5000 milis