在日常开发中，实现图片轮播功能是一个非常常见的需求。无论是网站的幻灯片展示还是产品图集，这种交互都能让用户体验更佳！😊 今天就来聊聊如何用简单的JS代码搞定“上一张”和“下一张”的图片切换功能。

首先，我们需要准备一组图片资源，并通过HTML创建一个容器用来放置这些图片。接着，在CSS里设置好基本样式，比如隐藏超出容器的部分等。最后就是最关键的JS部分啦！✨

```javascript

let currentIndex = 0;

const images = document.querySelectorAll('.image-container img');

images.forEach((img, index) => {

img.style.display = (index === currentIndex) ? 'block' : 'none';

});

document.querySelector('.prev').addEventListener('click', () => {

currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;

updateImage();

});

document.querySelector('.next').addEventListener('click', () => {

currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;

updateImage();

});

function updateImage() {

images.forEach((img, index) => {

img.style.display = (index === currentIndex) ? 'block' : 'none';

});

}

```

这样，当用户点击“上一张”或“下一张”按钮时，就能轻松切换到不同的图片啦！📸 想象一下，你的网站从此拥有了动态又流畅的视觉体验，是不是很酷呢？😎

前端开发 JavaScript 图片轮播