js实现图片点击时换一张,怎样让图片点击的时候换成另外一张,再点击其他图片时,别的图片都还原...
时间: 2024-09-15 15:07:45 浏览: 35
在JavaScript中,你可以通过创建一个事件监听器来实现在图片上点击切换图片的效果。下面是一个简单的示例,假设我们有一个`<img>`元素数组和它们对应的下一张图片索引:
```javascript
// 假设你有两张图片,index 0 代表第一张,index 1 代表第二张
const images = ['image1.jpg', 'image2.jpg'];
let currentIndex = 0; // 当前显示的图片索引
// 获取所有的图片元素
const imgElements = document.querySelectorAll('img');
// 为每个图片添加点击事件处理函数
imgElements.forEach((img) => {
img.addEventListener('click', function() {
// 切换到下一张图片
currentIndex = (currentIndex + 1) % images.length;
img.src = images[currentIndex]; // 更改图片地址
// 如果所有图片都已经点击过一次,再次点击恢复到初始图片
if (currentIndex === 0 && img.previousElementSibling) {
img.previousElementSibling.src = images[images.length - 1];
} else if (currentIndex === images.length - 1 && img.nextElementSibling) {
img.nextElementSibling.src = images[0];
}
});
});
```
这个例子中,每次点击图片时,会检查当前是否为第一张(如果为最后一张,就当作第一张),如果是并且已经切换到了第二张,那么就会将第一张图片恢复原样。
阅读全文