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

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

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

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

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);