如何使用 OnClick 更改图像？

Question

我有 7 张图片，从 0 开始，我想在每次单击图片时一张一张地更改它们。

这是我目前拥有的：

function changePic() {
    var img = new Array("1.png", "2.png", "3.png", "4.png", "5.png", "6.png");
        for(var p=0; p<6; p++) {
            document.getElementById("image").src=img[p]; 
        }                   
}

HTML: img onclick="changePic()" src="0.png" id="image"/

问题是它一次更改所有内容，因此它从 img 0 跳到 6。

Answer 1

摆脱循环，做这样的事情..

   var currentPic=0;
   function changePic() {
        var img = new Array("1.png", "2.png", "3.png", "4.png", "5.png", "6.png");                           
           document.getElementById("image").src=img[currentPic]; 
           currentPic++;   
           if(currentPic > 5) {currentPic=0;}              
    }

Answer 2

您每次点击设置 src 6 次。你想做一次，并在函数外增加一个计数器：

var imgs = new Array("1.png", "2.png", "3.png", "4.png", "5.png", "6.png");
var index = 0;
function changePic() {
    document.getElementById('image').src = imgs[index];
    index++;
    if ( index >= imgs.length ) index = 0;
}

您可能需要一个闭包，以减少全局命名空间 goop。请注意在 HTML <img>:

之前定义它

var changePic = (function(imgs) {
    var index = 0;
    return function changePic() {
        document.getElementById('image').src = imgs[index++];
        if ( index >= imgs.length ) index = 0;
    }
})(["1.png", "2.png", "3.png", "4.png", "5.png", "6.png"]);

如何使用 OnClick 更改图像？

How do I change images using OnClick?

javascript

for-loop

image

onclick

getelementbyid