如何使用變量點擊圖像時發生變化

Question

我需要進行各種類型的「幻燈片放映」，點擊時圖像必須循環播放。例如，我需要它循環5個圖像。

它已經建議我用一個onclick功能，使一個變量增加一個每一次點擊，因此加載時，它是第一個圖像，當點擊一次是第二圖像等

會如何我去做這個？

Answer 1

做的第一件事是有5個圖像陣列，以及一個變量來跟蹤你是在什麼指標：

var imgArray = ['img1', 'img2', 'img3', 'img4', 'img5']; 

var currentIndex = 0; 

然後，onclick事件例如使用添加到您的圖像（一個id的"img"），並增加該計數器。接下來應用modulus (remainder)運營商允許騎自行車。這意味着當計數器超出陣列的長度時，它將「循環」回零。

document.getElementById("img").onclick = function() { 
    currentIndex++; 
    currentIndex = currentIndex % imgArray.length; 
    this.src = imgArray[currentIndex]; 
} 

Example using 3 images

Answer 2

在網頁上添加您IMG空白源。

<img id = "image" src = "" /> 
<br /> 
<button id = "button">Next image</button> 

然後編寫腳本如下。

var img = document.getElementById("image"); 
    var button = document.getElementById("button"); 
    var imagesList = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; 

    i = 0; 
    img.src = imagesList[i]; 

    function nextImg(){ 
     img.src = imagesList[i+1]; 
     i = i+1; 
     if(i == imagesList.length){ 
     i = 0; 
     img.src = imagesList[i]; 
     } 
    } 

    button.onclick = nextImg;