javascript - 使用javascript的图像替换循环

Question

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

1. 有一个狗的形象。

2. 当我点击这张图片时，这张图片将被一张猫的图片取代。

3. 但是，如果我再次单击此图像，它将再次被原本在那里的狗所取代。

4. 如果我再点击一次，猫就会代替狗。

5. 等等。

我该如何进行替换这两个图像的永久循环？

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

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

使用 jQuery 的 JavaScript，

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

这是工作演示，http://jsfiddle.net/D9VvV/