图片轮播

图片轮播是网页中常见的动态展示组件，通过 jQuery 实现图片轮播可以加深对 DOM 操作、事件绑定与动画的理解。

实现功能

• 自动轮播
• 上一张 / 下一张 控制按钮
• 圆点导航切换
• 鼠标悬停暂停

jQuery 实现轮播基本结构

<div class="carousel">
  <ul class="slides">
    <li><img src="/images/banner1.jpg" /></li>
    <li><img src="/images/banner2.jpg" /></li>
    <li><img src="/images/banner3.jpg" /></li>
  </ul>
  <ol class="dots"></ol>
  <div class="prev">‹</div>
  <div class="next">›</div>
</div>

jQuery 轮播逻辑核心

$(function () {
  let index = 0;
  const $slides = $(".slides li");
  const $dots = $(".dots");
  const len = $slides.length;

  // 生成圆点
  for (let i = 0; i < len; i++) {
    $dots.append(`<li class="${i === 0 ? "active" : ""}"></li>`);
  }

  function showSlide(i) {
    $slides.eq(i).fadeIn().siblings().fadeOut();
    $dots.find("li").eq(i).addClass("active").siblings().removeClass("active");
  }

  $(".next").click(function () {
    index = (index + 1) % len;
    showSlide(index);
  });

  $(".prev").click(function () {
    index = (index - 1 + len) % len;
    showSlide(index);
  });

  $dots.on("click", "li", function () {
    index = $(this).index();
    showSlide(index);
  });

  let timer = setInterval(() => $(".next").click(), 3000);

  $(".carousel").hover(
    () => clearInterval(timer),
    () => (timer = setInterval(() => $(".next").click(), 3000))
  );
});

基础样式建议（可根据需求优化）

.carousel {
  position: relative;
  width: 600px;
  height: 300px;
  overflow: hidden;
}
.slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.slides li {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.slides li:first-child {
  display: block;
}
.dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}
.dots li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}
.dots li.active {
  background: #333;
}
.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  cursor: pointer;
}
.prev {
  left: 10px;
}
.next {
  right: 10px;
}

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。