使用javascript的图像替换循环

image replacement loop using javascript

本文关键字：替换 循环 图像 javascript 使用      更新时间：2023-09-26

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

  1. 有一张狗的照片。

  2. 当我点击此图片时，此图片将被一只猫的图片所取代。

  3. 然而，如果我再次单击此图像，它将再次被原来的狗所取代最初在那里。

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

  5. 等等。

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

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

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

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

所以，是的，任何有助于制作一种有效的算法，可以不断地用新图像替换原始图像的人，都将不胜感激。

试试这个，

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

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

var images = ["hackanm.gif", "compman.gif"];
var index = 0;
function changeSrc() {
  document.getElementById("myImage").src = images[index];
  index = (index + 1) % images.length;
}
相关文章：