怎么用js实现图片切换效果

要使用JavaScript实现图片切换效果，可以基于HTML和CSS来创建一个简单的图片轮播。以下是一个基本示例，展示了如何使用JavaScript来切换图片。

HTML结构

<div id="image-container">
    <img id="image" src="image1.jpg" alt="Image 1">
</div>
<button onclick="prevImage()">Previous</button>
<button onclick="nextImage()">Next</button>

CSS样式

#image-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
}

#image {
    width: 100%;
    height: auto;
}

JavaScript代码

let images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // 图片数组
let currentImageIndex = 0; // 当前图片索引

function showImage(index) {
    document.getElementById('image').src = images[index];
}

function nextImage() {
    currentImageIndex = (currentImageIndex + 1) % images.length;
    showImage(currentImageIndex);
}

function prevImage() {
    currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
    showImage(currentImageIndex);
}

// 初始化显示第一张图片
showImage(currentImageIndex);

解释

HTML: 创建一个容器div来放置图片，并添加两个按钮用于切换图片。
CSS: 设置图片容器的样式，确保图片不会超出容器。
JavaScript:
- 定义一个数组images存储所有图片的路径。
- currentImageIndex变量用于跟踪当前显示的图片索引。
- showImage(index)函数根据索引更新图片元素的src属性。
- nextImage()和prevImage()函数分别用于切换到下一张或上一张图片，并处理边界情况（即到达数组末尾时循环回到开始）。