图片轮播

图片轮播是网页中常见的动态展示组件，通过 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; }

loading