javascript - 将多个数组参数传递到 setTimeout 以进行幻灯片放映的问题

Question

我正在尝试创建一个由 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") . 除此之外，它工作得非常好，而且非常令人抓狂。

Answer 1

使用 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

Answer 2

您需要考虑在检查数组长度后添加一个这一事实：

if (currentIndex < imageArray.length - 1) {
  currentIndex = currentIndex + 1;
}
else {
  currentIndex = 0;
}

或者

currentIndex += 1;
if (currentIndex >= imageArray.length)
  currentIndex = 0;

但是，您实际上根本不需要传递参数，因为该函数可以只使用全局变量。（最好不要有，但既然你有，好吧，你不妨使用它。）

Answer 3

改成：

  if (currentIndex < imageArray.length - 1) {
      currentIndex = currentIndex + 1;
  }

那是因为否则，它将尝试显示imageArray[imageArray.length].

此外，而不是：

currentIndex = currentIndex + 1;

你可以只使用：

currentIndex ++;