使用jQuery语句写一个轮播图

以下是一个简单的轮播图的 jQuery 实现：

HTML：

<div class="slider">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
  <img src="image3.jpg" alt="">
</div>

<div class="dots">
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

CSS：

.slider {
  position: relative;
  width: 100%;
  height: 500px;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

.dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}

jQuery：

$(function() {
  var $slider = $('.slider');
  var $slides = $slider.find('img');
  var $dots = $('.dot');
  var currentSlide = 0;
  
  // 显示第一张图片
  $slides.eq(currentSlide).addClass('active');
  $dots.eq(currentSlide).addClass('active');

  // 自动轮播
  setInterval(function() {
    $slides.eq(currentSlide).removeClass('active');
    $dots.eq(currentSlide).removeClass('active');
    currentSlide = (currentSlide + 1) % $slides.length;
    $slides.eq(currentSlide).addClass('active');
    $dots.eq(currentSlide).addClass('active');
  }, 5000);

  // 点击圆点切换图片
  $dots.on('click', function() {
    var index = $(this).index();
    $slides.eq(currentSlide).removeClass('active');
    $dots.eq(currentSlide).removeClass('active');
    currentSlide = index;
    $slides.eq(currentSlide).addClass('active');
    $dots.eq(currentSlide).addClass('active');
  });
});

解释：

1. 首先获取轮播图容器、所有图片和圆点元素，并初始化当前显示的图片序号为 0。

2. 在页面加载时，将第一张图片和圆点设为 active 状态，以显示第一张图片。

3. 使用 setInterval 定时器实现自动轮播，每 5 秒将当前图片和圆点设为非 active 状态，然后将当前图片序号加 1 (并取模)，再将新的图片和圆点设为 active 状态，以显示下一张图片。

4. 当点击圆点时，根据圆点的 index 值，将当前图片和圆点设为非 active 状态，再将当前图片序号设为圆点的 index 值，最后将新的图片和圆点设为 active 状态，以显示对应的图片。