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