用jQuery实现轮播图

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

HTML部分：

<div id="carousel">
  <div class="slide" style="background: red;"></div>
  <div class="slide" style="background: green;"></div>
  <div class="slide" style="background: blue;"></div>
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>

CSS部分：

#carousel {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}
.slide.active {
  display: block;
}

jQuery部分：

$(document).ready(function() {
  var slides = $('#carousel .slide');
  var currentIndex = 0;
 
  function goToSlide(index) {
    slides.removeClass('active').eq(index).addClass('active');
  }
 
  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    goToSlide(currentIndex);
  }
 
  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    goToSlide(currentIndex);
  }
 
  $('#next').click(nextSlide);
  $('#prev').click(prevSlide);
 
  // 初始化时显示第一张幻灯片
  goToSlide(currentIndex);
});

这段代码实现了一个简单的轮播图功能，通过点击按钮来切换当前显示的幻灯片。这里没有包含动画效果，仅实现了基本的切换功能。