Question

function slideShow() {
    var pageSplash = document.getElementById('splash');
    var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
    var i = 0;

    while (i <= image.length) {
        if (i > image.length) {
            i = 0;
        }

        i += 1;
        pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';
        setTimeout('slideShow', 5000);
    }

}

我不确定为什么我的i变量没有从函数的其余部分被识别为i变量，所以当我尝试运行我的while循环时，它会收到一条错误消息，说它是未定义的。

Answer 1

我认为您需要setInterval而不是setTimeout，并且您希望在更新i后增加innerHTML时要小心。

function slideShow() {
    var pageSplash = document.getElementById('splash');
    var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];
    var i = 0;

    setInterval(function () {
      if (i === image.length) { 
          i = 0;
      }
      pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';
      i++;
    }, 5000)
}

slideShow();

Answer 2

您不需要while循环。您无需重置i。您无需设置innerHTML。

单击运行代码段... 以查看其工作原理。代码下面有更多解释

function slideShow(elem, images, delay, i) {
  elem.src = images[i % images.length];
  setTimeout(function() {
    slideShow(elem, images, delay, i+1);
  }, delay);
}

// setup slideshow 1
slideShow(
  document.querySelector('#slideshow1 img'),      // target element
  [                                               // array of images
     'http://lorempixel.com/100/100/animals/1/',
     'http://lorempixel.com/100/100/animals/2/',
     'http://lorempixel.com/100/100/animals/3/',
     'http://lorempixel.com/100/100/animals/4/',
     'http://lorempixel.com/100/100/animals/5/',
     'http://lorempixel.com/100/100/animals/6/'
  ],
  1000,                                           // 1000 ms delay (1 second)
  1                                               // start on slide index 1
);

// setup slideshow 2
slideShow(
  document.querySelector('#slideshow2 img'),     // target element
  [                                              // array of images
     'http://lorempixel.com/100/100/nature/1/',
     'http://lorempixel.com/100/100/nature/2/',
     'http://lorempixel.com/100/100/nature/3/',
     'http://lorempixel.com/100/100/nature/4/',
     'http://lorempixel.com/100/100/nature/5/',
     'http://lorempixel.com/100/100/nature/6/'
  ],
  500,                                           // 500 ms delay
  1                                              // start on slide 1
);

#slideshow1, #slideshow2 {
  width: 150px;
  display: inline-block;
}

<div id="slideshow1">
  <h2>Animals</h2>
  <p>(1000 ms delay)</p>
  <!-- initial image -->
  <img src="http://lorempixel.com/100/100/animals/1/">
</div>
<div id="slideshow2">
  <h2>Nature</h2>
  <p>(500 ms delay)</p>
  <!-- initial image -->
  <img src="http://lorempixel.com/100/100/sports/1/">
</div>

这是一个巨大的改进，因为您的slideshow函数是可重用的。这意味着您可以对所需的任何幻灯片显示使用相同的功能。你甚至可以在同一页面上运行多个幻灯片，就像我在这里演示的那样。

Answer 3

setTimeout再次调用该函数，因此每次调用它时都会将i重新初始化为0。由于您可以使用setTimeout以递归方式调用该函数，因此您不需要while循环。将i完全拉出函数并使其成为全局变量。

//i should be global 
var i = 0;

function slideShow() {
var pageSplash = document.getElementById('splash');
var image = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];

    if (i >= image.length) {
        i = 0;
    }

    i += 1;

    pageSplash.innerHTML = '<img id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + image[i] + '">';

    //set timeout is going to call slideShow again so if it's in the function it will call recursively, if you wanted to stop after a certain point you could nest setTimeout in an if
    setTimeout(slideShow, 5000);
}

//you need to initially call the function
slideShow();

Answer 4

正如其他人所指出的那样，while循环是不必要的，正如我所指出的那样，setTimout写得不正确。以下内容显着简化了您的代码：

 var i = 0;
 function slideShow() {
     var pageSplash = document.getElementById('splash');
     var imageArray = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg"];

     if(i < imageArray.length) {
         pageSplash.innerHTML = '<img title='+ imageArray[i] + ' id ="splashImage" src="file:///C:/JonTFS/JonGrochCoding/Javascript%20Practical%20Test/' + imageArray[i] + '">';
     }
     i++;
 }

 setInterval(slideShow, 2000);

请参阅：https://jsfiddle.net/dauvc4j6/8/了解工作版本。

Javascript数组无法识别调用变量

4 个答案: