JavaScript数组无法识别称为变量

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 ，并且要小心在更新innerHTML之后递增i 。

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/ 。