JavaScript点击多张图片切换
时间: 2023-08-14 18:29:27 浏览: 89
可以通过以下代码实现点击多张图片切换:
HTML代码:
```html
<img src="image1.jpg" class="myImages" onclick="changeImage(this)" />
<img src="image2.jpg" class="myImages" onclick="changeImage(this)" />
<img src="image3.jpg" class="myImages" onclick="changeImage(this)" />
```
JavaScript代码:
```javascript
function changeImage(img) {
var images = document.getElementsByClassName("myImages");
for (var i = 0; i < images.length; i++) {
if (images[i].src === img.src) {
if (i === images.length - 1) {
images[0].click();
} else {
images[i + 1].click();
}
break;
}
}
}
```
当用户点击任何一个图片时,`changeImage()`函数将被调用。函数将获取所有图片元素的引用,并找到与被点击的图片相匹配的那个。然后它将检查是否是最后一张图片,如果是,则将第一张图片设置为下一个要显示的图片。否则,它将设置下一张图片为要显示的图片。最后,它将调用下一个要显示的图片的`click()`方法,以触发相应的点击事件。这样就可以实现多张图片的切换了。