jQuery写轮播图

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

HTML部分：

<div id="slider">
  <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部分：

#slider {
  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 = $('#slider .slide');
  var currentIndex = 0;
 
  function goToSlide(index) {
    slides.removeClass('active').eq(index).addClass('active');
  }
 
  $('#next').click(function() {
    currentIndex = (currentIndex + 1) % slides.length;
    goToSlide(currentIndex);
  });
 
  $('#prev').click(function() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    goToSlide(currentIndex);
  });
 
  goToSlide(currentIndex); // 初始显示第一张图片
});

这段代码实现了一个简单的轮播图功能，通过点击按钮来切换当前显示的图片。这里没有包含任何动画效果，仅仅是切换active类来显示或隐藏图片。