# 图片轮播

URL: https://caijiao.org/jquery/08-projects/01-carousel
Source: docs/jquery/08-projects/01-carousel.md
Description: 本文通过实战案例演示如何使用 jQuery 实现图片轮播效果，包括自动切换、前后按钮、动态添加图片等，适合初学者学习 jQuery 项目开发。

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

## 实现功能

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

## jQuery 实现轮播基本结构

```html
<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 轮播逻辑核心

```js
$(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))
  );
});
```

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

```css
.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;
}
```

[在线代码演示](/jquery/demos/26.html)