使用for循環的Javascript圖像幻燈片

我想通過使用for循環在javascript中的3個圖像循環。這裏是我的代碼：使用for循環的Javascript圖像幻燈片

<img name="slide" width="300" height="300"> 

var i=0; 
var images = []; 

images[0] = "images/1.jpg"; 
images[1] = "images/2.jpg"; 
images[2] = "images/3.jpg"; 

function changeImage() { 

    for(i=0; i < images.length; i++) { 
     document.slide.src = images[i]; 
    } 
} 


window.onload = changeImage;

當前，只顯示圖像3。任何人都知道我在這裏做錯了什麼？

來源

2017-03-25 Brixsta

是的 - 這是因爲您的for循環運行會立即結束，因此沒有時間顯示幻燈片1和2。

試試這個：

var currentImage = 0, 
images = [ 
    "https://unsplash.it/200/300?image=100", 
    "https://unsplash.it/200/300?image=101", 
    "https://unsplash.it/200/300?image=102" 
]; 

function initSlideshow() { 
    setImage(0); 
    setInterval(function(){ 
     nextImage(); 
    },1000); 
} 

function nextImage() { 
    if(images.length === currentImage + 1){ 
     currentImage = 0; 
    } else { 
     currentImage++; 
    } 
    setImage(currentImage); 
} 

function setImage(image) { 
    document.querySelectorAll('.slide')[0].src = images[image]; 
} 

window.onload = initSlideshow();

例子：https://jsfiddle.net/vvbdwazc/

來源

2017-03-25 00:04:20 rorymorris89

老實說，我是一個新手。我如何去延長循環以包括其他兩張幻燈片？ – Brixsta

我正在給你寫一段代碼，稍後會更新答案:) – rorymorris89

@ rorymorris89看看我的答案。 –

目前，只有3圖像顯示。任何人都知道我在做什麼錯誤在這裏？

這一切都被顯示出來，但你只能看到第三張圖像的原因是因爲在顯示下一張圖像之前你沒有暫停一段時間，因此它看起來不起作用。

使用setInterval()方法在指定時間後顯示每個圖像。

例子：

var i=0; 
var images = []; 

images[0] = "images/1.jpg"; 
images[1] = "images/2.jpg"; 
images[2] = "images/3.jpg"; 

function changeImage() { 
    for(i=0; i < images.length; i++) { 
     document.slide.src = images[i]; 
    } 
} 

var myVar = setInterval(function(){ changeImage() }, 1000);

以後可以希望阻止setInterval()方法從執行在這種情況下，任何再看看clearInterval()。

來源

2017-03-25 00:11:21

嗯，似乎沒有工作。簡要地在一張空白圖像上暫停，然後轉到它所在的圖像3。 – Brixsta

@Brixsta我知道你已經解決了問題，但看到編輯。 –

謝謝你，先生。這是一個非常簡潔的方式來做到這一點 – Brixsta

這是因爲for工作得如此之快，它很快就會變成第三張圖像。你可以使用，而不是一些setInterval這樣的：

<img id="slide" width="300" height="300"> 
<script> 
    var images = []; 

    images[0] = "images/1.jpg"; 
    images[1] = "images/2.jpg"; 
    images[2] = "images/3.jpg"; 

    var i = 0; 
    setInterval(function() { 
     var slide = document.querySelector("#slide"); //Select the img element by ID 
     slide.src = images[i++]; 
     if(i > images.length - 1) 
      i = 0; 
    }, 1000); //Time in milliseconds 
</script>

這將改變不斷回第一個圖像，當它到達最後一個。

編輯：忘了提。 setInterval就像一個「中繼器」，它會無限期地工作，直到你清除它。要清除它，你需要將它賦值給一個變量，然後使用clearInterval傳遞變量。

var interval = setInterval(function(){}, 1000) //example 
clearInterval(interval);

像這樣。

來源

2017-03-25 00:16:00 vmcruz

謝謝你們的幫助，我必須把頭繞在這東西上。 – Brixsta

window.onload = changeImage;告訴我你要更改頁面加載事件上的圖像？換句話說，只有在頁面加載（或刷新）時，圖像纔會改變。

由於狀態不是默認維護（例如本地存儲或會話存儲或cookie），所以最好的辦法是使用隨機生成器隨機選擇。見Generating random whole numbers in JavaScript in a specific range?

來源

2017-03-25 00:17:21

使用for循環的Javascript圖像幻燈片

回答

相關問題