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

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

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

或

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

但是，您根本不需要传递参数，因为该函数只能使用全局变量。（最好不要有一个，但是既然你做了，那么你也可以使用它。）

Answer 2

更改为：

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

这是因为否则会尝试显示imageArray[imageArray.length]。

此外，而不是：

currentIndex = currentIndex + 1;

你可以使用：

currentIndex ++;

Answer 3

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

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

3 个答案: