如何使用OnClick更改图像？

Question

I have 7 images, it starts in 0 and I want to change them one by one each time I click on the image.

This is what I have so far:

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"/

The problem is that it changes everything at once, so it skips from img 0 to 6.

Answer 1

You're setting the src 6 times with each click. You want to do it once, and increment a counter outside the function:

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

You may want a closure, to reduce global namespace goop. Just be careful to define it before your 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

get rid of the loop, and do something like this..

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