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;
}

您可能需要一个闭包来减少全局命名空间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"]);

Answer 2

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

   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;}              
    }

如何使用OnClick更改图像？

2 个答案: