将多个数组参数传递给setTimeout以进行幻灯片放映

时间:2013-02-21 22:20:09

标签: javascript arrays slideshow settimeout rotator

我正在尝试创建一个简单的幻灯片,其中包含3个旋转图像,这些图像将在最后一次显示时重新开始,相隔5000毫秒。

<div id="slideshow">&nbsp;</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”),然后重置为第一个。除此之外,它的工作非常精细,而且非常令人发狂。

3 个答案:

答案 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