写个轮播图

好的，以下是一个基于 jQuery 的轮播图示例：

HTML 代码：

<div class="slider">
  <div class="slides">
    <img src="img/slide1.jpg" alt="">
    <img src="img/slide2.jpg" alt="">
    <img src="img/slide3.jpg" alt="">
  </div>
  <div class="navigation">
    <span class="bullet active"></span>
    <span class="bullet"></span>
    <span class="bullet"></span>
  </div>
</div>

CSS 代码：

.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px;
}

.slides {
  display: flex;
  width: 300%;
  height: 100%;
}

.slides img {
  width: 33.33%;
  height: 100%;
}

.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.bullet {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  margin-right: 10px;
  cursor: pointer;
}

.active {
  background-color: #333;
}

jQuery 代码：

$(document).ready(function() {
  // 初始化轮播图
  var slideIndex = 0;
  showSlides(slideIndex);

  // 点击导航圆点切换图片
  $(".bullet").click(function() {
    slideIndex = $(this).index();
    showSlides(slideIndex);
  });

  // 自动轮播
  setInterval(function() {
    slideIndex++;
    showSlides(slideIndex);
  }, 3000);

  // 显示轮播图
  function showSlides(index) {
    var slides = $(".slides img");
    var bullets = $(".bullet");
    if (index >= slides.length) {
      slideIndex = 0;
    } else if (index < 0) {
      slideIndex = slides.length - 1;
    }
    slides.hide().eq(slideIndex).fadeIn();
    bullets.removeClass("active").eq(slideIndex).addClass("active");
  }
});

该示例中，轮播图的容器为 `.slider`，包含一个图片列表 `.slides` 和一个导航圆点列表 `.navigation`。使用 CSS 将图片列表设置为横向排列，并且导航圆点居中显示。使用 jQuery 实现点击导航圆点和自动轮播切换图片，并且在当前图片下方的导航圆点标识出当前显示的图片。