在 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，从而更改显示的图片为当前索引对应的图片。
