在 JavaScript 中实现图片切换可以通过多种方法，下面是一个简单的示例，使用 HTML、CSS 和 JavaScript 来实现图片的切换效果。
实现效果：
代码：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>图片切换示例</title><style>.image-container {text-align: center;margin: 20px;}img {max-width: 100%;height: auto;}</style></head><body><div class="image-container"><img id="image" src="./image/image1.jpg" alt="Image" /><br /><button id="prev">上一张</button><button id="next">下一张</button></div><script>//1. 定义图片数组const images = ['./image/image1.jpg','./image/image2.jpg','./image/image3.jpg'];//2. 初始化当前索引let currentIndex = 0;//3. 获取图片元素const imageElement = document.getElementById('image');//4. 为 “下一张” 按钮添加事件监听器document.getElementById('next').addEventListener('click', () => {currentIndex = (currentIndex + 1) % images.length;imageElement.src = images[currentIndex];console.log("当前图片路径：", imageElement.src)});// 5. 为 “上一张” 按钮添加事件监听器document.getElementById('prev').addEventListener('click', () => {currentIndex = (currentIndex - 1 + images.length) % images.length;imageElement.src = images[currentIndex];console.log("当前图片路径：", imageElement.src)});</script></body>
</html>部分代码解析：
4. 为 “下一张” 按钮添加事件监听器
document.getElementById('next').addEventListener('click', () => {currentIndex = (currentIndex + 1) % images.length;imageElement.src = images[currentIndex];
});- 获取 ID 为
next的元素，并为其添加一个点击事件监听器。 - 在点击时，更新
currentIndex，使其加 1，并使用取模运算来确保它在images数组的有效索引范围内（循环回到开头）。 - 然后，将
imageElement的src属性更新为新的图片路径，以显示下一张图片。
更新当前索引：
currentIndex = (currentIndex + 1) % images.length;
currentIndex + 1：将当前索引增加 1，表示用户想要查看下一张图片。% images.length：使用取模运算，确保currentIndex在有效范围内。如果currentIndex达到images.length（即数组长度），则结果会回到 0，实现循环效果。- 例如，如果
currentIndex是 2（第三张图片），加 1 后变成 3，再取模 3，结果为 0，表示回到第一张图片。
currentIndex = (currentIndex - 1 + images.length) % images.length;
currentIndex - 1：将当前索引减少 1，表示用户想要查看上一张图片。+ images.length：加上images.length是为了处理当前索引为 0 的情况，确保索引不会变为负数。如果currentIndex是 0，减 1 后会变为 -1，加上数组长度后会变为images.length（即循环到数组的最后一张）。% images.length：使用取模运算来确保currentIndex在有效范围内。如果currentIndex达到images.length，取模后会变为 0，表示回到第一张图片。- 例如，如果
currentIndex是 0（第一张图片），减 1 后变成 -1，加上 3（假设数组长度为 3）后变为 2，取模 3 结果为 2，表示当前索引变为最后一张图片。
更新图片源：
imageElement.src = images[currentIndex];
imageElement.src：获取之前定义的图片元素。images[currentIndex]：根据更新后的currentIndex获取相应的图片路径。- 将这个路径赋值给
imageElement.src，从而更改显示的图片为当前索引对应的图片。
![[sniffer]分析](https://i-blog.csdnimg.cn/direct/4027f26ce0a047598ecf4cf749700264.png)
