如何使用变量点击图像时发生变化

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;