javascript - 如何使用 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

您正在设置 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;
}

您可能需要一个闭包，以减少全局命名空间的困惑。请小心在 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"]);