我有三张图像 image1、image2、image3。我希望这发生:
image1 appears when the page loads
image1 clicked-->image2 displays
image2 clicked-->image3 displays
image3 clciked-->image1 displays
目前实际发生的情况是这样的:
image1 clicked-->image3 displays
image3 clicked-->image1 displays
image1 clicked-->image2 displays
image2 clicked-->image3 displays
image3 clciked-->image1 displays
...并且循环正确地继续。
为什么第一个周期没有加载图像 2？我在下面附上了我的 Javascript 代码。谢谢
<html>
<head>
</head>
<body>
<div class="imagecentre"><img id="myButton" src="image1.jpg"/></div>
<script type="text/javascript">
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
i = 1;
// event handler
document.getElementById('myButton').addEventListener('click', function()
if (i==images.length-1){
this.src=images[0];
i=0;
}
else {
this.src=images[i+1];
i++;
}
}, false);
</script>
</body>
最佳答案
看看你的逻辑，当页面加载时，i == 1。这意味着 onclick 的“else”条件正在触发，因此加载图像[2](这是数组中的第三个图像)
关于javascript - 为什么 JavaScript onClick 事件中图像显示不正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23170609/