JavaScript轮播图

以下是一个简单的JavaScript轮播图实现的示例代码：

HTML部分：

<div class="carousel">
  <div class="carousel-inner">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片... -->
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

CSS部分：

.carousel-inner img {
  display: none;
  width: 100%;
}
 
.carousel-inner img.active {
  display: block;
}

JavaScript部分：

document.addEventListener('DOMContentLoaded', function() {
  var currentIndex = 0;
  var images = document.querySelectorAll('.carousel-inner img');
  var prevButton = document.querySelector('.prev');
  var nextButton = document.querySelector('.next');
 
  function showImage(index) {
    images.forEach(img => img.classList.remove('active'));
    images[index].classList.add('active');
  }
 
  function nextImage() {
    currentIndex = (currentIndex + 1) % images.length;
    showImage(currentIndex);
  }
 
  function prevImage() {
    currentIndex = (currentIndex - 1 + images.length) % images.length;
    showImage(currentIndex);
  }
 
  showImage(currentIndex);
  nextButton.addEventListener('click', nextImage);
  prevButton.addEventListener('click', prevImage);
});

这段代码实现了一个基本的轮播图功能，通过点击按钮切换图片。currentIndex变量用于跟踪当前激活的图片。showImage函数用于切换图片的显示状态，nextImage和prevImage分别用于处理下一张和上一张图片的逻辑。