帮我写一个JS的轮播图

很高兴为您提供帮助，以下是一个基本的JS轮播图示例：

HTML代码：

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    <img src="image5.jpg" alt="Image 5">
  </div>
  <div class="slider-nav">
    <a href="#" class="prev">Previous</a>
    <a href="#" class="next">Next</a>
  </div>
</div>

CSS代码：

.slider-container {
  position: relative;
}
.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.slider img {
  width: 100%;
  height: 100%;
  display: none;
}
.slider img.active {
  display: block;
}
.slider-nav {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.slider-nav a {
  display: inline-block;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
}

JS代码：

var slider = document.querySelector('.slider');
var prevBtn = document.querySelector('.prev');
var nextBtn = document.querySelector('.next');
var images = document.querySelectorAll('.slider img');
var currentIndex = 0;

function showImage(n) {
  images[currentIndex].classList.remove('active');
  currentIndex = (n + images.length) % images.length;
  images[currentIndex].classList.add('active');
}

function prevImage() {
  showImage(currentIndex - 1);
}

function nextImage() {
  showImage(currentIndex + 1);
}

prevBtn.addEventListener('click', prevImage);
nextBtn.addEventListener('click', nextImage);

showImage(currentIndex);
setInterval(nextImage, 5000);

这个JS轮播图的基本思路是，通过一个变量currentIndex来记录当前显示的图片的索引，然后通过showImage函数来显示下一张或上一张图片。prevImage和nextImage函数分别用于处理上一张和下一张按钮的点击事件。最后，我们通过setInterval函数来定期自动播放图片。