javascript - 如何将图像更改为另一个图像？

Question

我想知道如何将图像更改为另一个图像，然后恢复正常，因为以下代码不起作用：

function change(){
    img = document.getElementById("img")
    img.src = "Login_img2.jpg"
    img.onclick = "change2()"
}

function change2(){
    img = document.getElementById("img")
    img.src = "login_img3.jpg"
    img.onclick = "changeN()"
}

function changeN(){
    img = document.getElementById("img")
    img.src = "login_img1.jpg"
    img.onclick = "change()"
}

Answer 1

你的onclick函数会被立即调用，因为你在()函数之后包含（另外，不要引用它们！）。尝试更改为这样的：

function change(){
    img = document.getElementById("img")
    img.src = "Login_img2.jpg"
    img.onclick = change2;
}

Answer 2

一种完全不同的方法：只需将所有图像源保存在一个数组和一个要显示的变量中，即当前显示的图像。然后你只需要循环遍历这个数组，而不必每次都更改 clickhandler。

(function(){
  // list of images
  var images = [ "login_img1.jpg", "login_img2.jpg", "login_img3.jpg" ],
  // current shown image
      curImage = 0;

  // event handler
  document.getElementById( 'img' ).addEventListener( 'click', function(){
    // get next image in line
    curImage = (curImage + 1) % images.length;
    // assign it
    this.src = images[curImage];
  });
})();

Answer 3

您可以查看小提琴http://jsfiddle.net/7pKxb/，这可能会给您一些想法。

我更喜欢使用标志，然后在点击时在它们之间交换

 if (blFlag) {
    blFlag = false;
    oTux.setAttribute('src', 'http://tux.crystalxp.net/png/brightknight-tux-hatches-3796.png');
 } else {
    blFlag = true;
    oTux.setAttribute('src', 'http://mascot.crystalxp.net/png/pit-tux-sonic-4206.png');
}