图片轮播 图片轮播是网页中常见的动态展示组件，通过 jQuery 实现图片轮播可以加深对 DOM 操作、事件绑定与动画的理解。
实现功能 自动轮播上一张 / 下一张 控制按钮圆点导航切换鼠标悬停暂停jQuery 实现轮播基本结构 html
let index = 0;
const $slides = $(".slides li");
const $dots = $(".dots");
const len = $slides.length;
// 生成圆点
for (let i = 0; i < len; i++) {
$dots.append(`
`);}
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;
}查看源码复制源码示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。