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

我需要做一个“幻灯片”的排序，其中图像必须循环时，点击。例如，我需要它在5个图像之间循环

有人建议我使用一个

onclick

函数，使变量每单击一次增加一个，因此加载时，它是第一个图像，单击一次它就是第二个图像，等等

---

我该怎么做呢？

首先要做的是有一个由5个图像组成的数组，以及一个变量来跟踪您所在的索引：

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

var currentIndex = 0;

然后将

onclick

事件添加到图像中（例如，使用

id

的

“img”

），并递增该计数器。接下来，应用一个操作符以允许循环。这意味着当计数器超过数组长度时，它将“循环”回零

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

---

在空白来源的网页中添加您的img。

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

---

安德鲁。。。我建议用谷歌搜索幻灯片图像。。要么你会得到一些js插件，要么你会找到一些代码。。因此，只有当您发现代码中存在一些问题而无法实现时，人们才会提供帮助。。所以你需要先试试……）一旦你被困在任何地方，我们可以帮助你：）嗨，欢迎来到Stack Overflow。通常，这里的一个好问题包括努力的表现；您应该添加一些代码来显示您已经尝试过的内容。有关更多提示，请参见抱歉，我是新来的Jesse。我必须这样做。你提出的解决方案对我来说似乎足够可靠，试试看！另一个提示：使用数组

[“url/image1.png”，“url/image2.png”，…]

来存储图像的路径，并设置图像元素

。src=images[i]

其中

i

是您要讨论的变量。

    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;