菜鸟教程
教程 jquery tutorial

图片轮播

图片轮播是网页中常见的动态展示组件，通过 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;
}
在线代码演示
源码 
<style>
  .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;
}


ol {
list-style: none;
}
</style>
<div class="carousel">
<ul class="slides">
<li><img src="https://cdn.pixabay.com/photo/2025/06/10/14/10/woman-9652287_640.jpg&quot; /></li>
<li><img src="https://cdn.pixabay.com/photo/2025/06/10/13/54/woman-9652192_640.jpg&quot; /></li>
<li><img src="https://cdn.pixabay.com/photo/2025/03/31/15/31/mountains-9504977_640.jpg&quot; /></li>
</ul>
<ol class="dots"></ol>
<div class="prev">‹</div>
<div class="next">›</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js&quot;&gt;&lt;/script&gt;
<script>
$(function () {
let index = 0;
const $slides = $(".slides li");
const $dots = $(".dots");
const len = $slides.length;


// 生成圆点
for (let i = 0; i &lt; len; i++) {
  $dots.append(`&lt;li class=&quot;${i === 0 ? &quot;active&quot; : &quot;&quot;}&quot;&gt;&lt;/li&gt;`);
}

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

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

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

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

let timer = setInterval(() =&gt; $(&quot;.next&quot;).click(), 3000);

$(&quot;.carousel&quot;).hover(
  () =&gt; clearInterval(timer),
  () =&gt; (timer = setInterval(() =&gt; $(&quot;.next&quot;).click(), 3000))
);



});
</script>

相关内容