Question

我在下面显示了简单的html和Javascript代码，其中显示了image1，当单击它时，它将更改为image2。我在将此扩展到第三个图像时遇到问题，如果单击图像2，它将更改为图像3，最后如果单击图像3，则返回到图像1，并且可以再次重复该周期。任何人都可以告诉我最好的方法是什么，因为我认为我目前为2张图片做的方式不适用于我所描述的内容。感谢

注意：这是我在考试准备中遇到的问题，因此我不能使用JQuery - 必须是JavaScript。

<html> 
<head> 
<script> 
function preloadImages() { 
Image1=new Image(); 
Image1.src = "image1.jpg";
} 

</script> 
</head> 
<body onLoad="preloadImages();"> 
<img name="myButton" src="image2.jpg"
onClick="document.myButton.src='image1.jpg';" 
onClick="document.myButton.src='image2.jpg';"> 
</body> 
</html>

Answer 1

如何将事件侦听器和一系列图像扩展到您喜欢的任何数字

<html>

    <head></head>

    <body>
        <img id="myButton" src="image2.jpg" />
        <script type="text/javascript">
            var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
                i = 1;

            // preload
            for (var j=images.length; j--;) {
                var img = new Image();
                img.src = images[j];
            }

            // event handler
            document.getElementById('myButton').addEventListener('click', function() {
                this.src = images[i >= images.length - 1 ? i = 0 : ++i];
            }, false);
        </script>
    </body>

</html>

FIDDLE

Answer 2

您可以在三个类之间切换，并将不同的图像附加到所有类，以查看如何在三个类之间切换，请检查此问题here。您还可以使用数组并将图像的src分配给数组，并一次为您的img分配一个。希望它有帮助

var mylinks = new Array();
mylinks[0] = "abc.jpg";
mylinks[1] = "xyz.jpg";
mylinks[2] = "lmn.jpg";

首先分配一个说(var i=0)，然后分配mylinks[i]，然后分配(i=i+1)并分配mylinks[i]并继续执行，直到i> mylinks.length然后重新开始，即i=0;

Answer 3

<html> 
<head> 
<script> 

var imagesNames = ["Image1.jpg", "Image2.jpg", "Image3.jpg"];

function preloadImages() { 
  for (var i = 0 ; i < imagesNames.length; i++) {
    var img = new Image();
    img.src = imageNames[i];
  }
} 

var imageIndex = 0;
img.onclick = function() {
  imageIndex++;
  if (imageIndex > imagesNames.length) {
    imageIndex = 0;
  }

  document.getElementById("myButton").src = imageNames[imageIndex];
}

</script> 
</head> 
<body onLoad="preloadImages();"> 
<img id="myButton">
</body> 
</html>

Answer 4

HTML：

<img name="myButton" id="myButton" data-img="1" src="image1.jpg" />

JS：

var imgList = ["image1.jpg","image2.jpg", "image3.jpg" ];

var myButton = document.getElementById("myButton");
myButton.onclick = function( e ){
    var elem = e.target,
    imageIndex = parseInt(elem.dataset.img,10);
    if( imageIndex <= (imgList.length -1) ) {
        elem.src = imgList[imageIndex++];
        elem.dataset.img = imageIndex;
    } else {
        elem.src = imgList[0];
        elem.dataset.img = 1;
    }
}

小提琴：http://jsfiddle.net/aslancods/ry6hS/

如何使用javascript onClick事件在3个图像之间进行更改？

4 个答案: