Question

所以我正在学习W3上的图像替换技术，这就是我想要的：

有一张狗的图像。
当我点击此图片时，此图片将被猫的图片取代。
但是，如果我再次点击此图片，它将被狗再次替换原来那里。
如果我再次点击，猫会替换狗。
等等。

如何更换这两张图片？

这是一个类似于我想要做的链接：

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_src

在该示例中，如果单击图像，它将替换图像一次。但如果再次点击它，原始图像将不会取代它。

所以是的，任何帮助制作一个能够不断用新图像替换原稿的高效算法的人，将不胜感激。

Answer 1

将图像放入数组中，并使用变量来跟踪下一个要显示的图像：

var images = ["hackanm.gif", "compman.gif"];
var index = 0;

function changeSrc() {
  document.getElementById("myImage").src = images[index];
  index = (index + 1) % images.length;
}

Answer 2

试试这个，

<img id="img" src="cat.jpg" />

JavaScript使用jQuery，

$('#img').toggle(
    function(){
        $(this).attr('src', 'dog.jpg');
    },
    function(){
        $(this).attr('src', 'cat.jpg');
    }
);

以下是工作演示http://jsfiddle.net/D9VvV/

使用javascript进行图像替换循环

2 个答案: