Question

我需要制作各种各样的“幻灯片”，其中图片必须在点击时循环显示。例如，我需要循环浏览5张图像。

有人建议我使用onclick函数，使变量每次点击增加一个，所以加载时，它是第一个图像，一旦点击它是第二个图像，等等。

我将如何做到这一点？

Answer 1

首先要做的是拥有一个包含5个图像的数组，以及一个用于跟踪您所在索引的变量：

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

var currentIndex = 0;

然后在您的图片中添加onclick事件（，例如id "img" ，并递增该计数器。接下来应用modulus (remainder)运算符以允许循环。这意味着当计数器超过阵列的长度时，它将“循环”＃34;回到零。

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;

如何使用变量单击更改图像

2 个答案: