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

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

3 个答案: