如何使用 javascript onClick 事件在 3 个图像之间切换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23169501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change between 3 images with javascript onClick event?
提问by kellzer
I have simple html and Javascript code shown below where image1 is displayed, and when it is clicked it changes to image2. I am having a problem extending this to a third image such that if image2 is clicked, it changes to image3 and finally if image3 is clicked that it returns to image1 and the cycle can be repeated once more. Can anyone suggest to me what the best approach is because I think that the way I am currently doing it for 2 images won't work for what I have described. Thanks
我在下面显示了简单的 html 和 Javascript 代码，其中显示了 image1，当单击它时，它会更改为 image2。我在将其扩展到第三张图像时遇到问题，如果单击 image2，它会更改为 image3，最后如果单击 image3，它会返回到 image1，并且可以再次重复循环。任何人都可以向我建议最好的方法是什么，因为我认为我目前为 2 张图像所做的方式不适用于我所描述的内容。谢谢
Note:This is a problem I have encountered for exam preparation and as such I can't use JQuery-must be JavaScript.
注意：这是我在备考过程中遇到的一个问题，因此我不能使用 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>
回答by adeneo
How about event listeners and an array of images that can be extended to any number you like
事件侦听器和可以扩展到您喜欢的任何数量的图像数组怎么样？
<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>
回答by Jeremy J Starcher
<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>
回答by sudhan kantharuban
HTML :
HTML :
<img name="myButton" id="myButton" data-img="1" src="image1.jpg" />
JS:
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;
}
}
Fiddle : http://jsfiddle.net/aslancods/ry6hS/
回答by Aameer
you can toggle between three classes and attach different images to all classes to see how to toggle between three classes check this question here. You can also use an array and assign src of images to the array and assign one to your img at a time.Hope it helps
您可以在三个类之间切换并将不同的图像附加到所有类以查看如何在三个类之间切换，请在此处查看此问题。您还可以使用数组并将图像的 src 分配给该数组，并一次为您的 img 分配一个。希望它有帮助
var mylinks = new Array();
mylinks[0] = "abc.jpg";
mylinks[1] = "xyz.jpg";
mylinks[2] = "lmn.jpg";
first assign one say (var i=0)and you assign mylinks[i]and then (i=i+1)and assign mylinks[i]and keep on doing it till i> mylinks.lengththen start-over i.e i=0;
首先分配一个说(var i=0)，你分配mylinks[i]然后(i=i+1)分配mylinks[i]并继续做直到i> mylinks.length然后重新开始即i=0;
