用 display: none/block 控制显隐实现轻量轮播,配合 clearInterval 清理定时器、固定容器高度、明确图片宽高及索引绑定导航元素,确保不卡顿、不重叠、可暂停且体验一致。

直接用 display: none 切换 + setInterval 定时器 + 手动清理逻辑,就能跑起来一个不卡、不崩、可暂停的轮播图。别一上来就引 Swiper 或写 CSS 动画,那些是优化项,不是启动项。
怎么让图片一张张显示不重叠
核心是控制显隐,不是位移或透明度。所有 <img> 默认设 style="display: none;",只给当前那张加 style="display: block;"。这样最轻量,也避免布局抖动。
- 容器必须设固定高度(如
height: 400px),否则display切换会触发重排,页面跳动 - 别用
visibility: hidden—— 它占位,可能撑高父容器;也别用opacity: 0—— 仍响应点击,且需额外加transition - 切换前先遍历所有
<img>清掉display: block,再设目标索引的为block,顺序不能反 - 每张图必须带
alt和明确宽高(如width="600" height="400"),防加载中塌陷
自动轮播为什么总乱跳
因为没清定时器。只写 setInterval(switchImage, 3000) 是危险操作:鼠标悬停还在切,点按钮后两个定时器并发,图片就疯了。
- 定义全局变量
let carouselTimer = null,每次调用setInterval前先clearInterval(carouselTimer) -
mouseenter时设isPaused = true并clearInterval,mouseleave时重置并重启定时器 - 左右按钮点击后也要调用
resetTimer(),否则刚切到第2张,0.5秒后又切到第3张 - 移动端要补
touchstart/touchend,不然手指滑动无法暂停
导航按钮和指示点怎么同步状态
按钮和圆点不是装饰,是可控入口。它们得和当前图片索引严格绑定,否则用户点第3个点却切到第2张图,体验直接崩。
立即学习“前端免费学习笔记(深入)”;
- 按钮用
<button type="button" data-index="0">,不用<a>或<div>,防止默认跳转或焦点问题 - 指示点动态生成:
for (let i = 0; i ` } - 每次切换后,遍历所有点,给对应
data-index的加class="active",其余移除 - 点按钮或点圆点时,先
isPaused = true,再执行showImage(i),最后重置定时器
最容易被忽略的是图片加载失败后的兜底——某张图 404,<img> 高度变成 0,整个轮播容器塌成一条线。加 onerror 回调或用 SVG 占位图能立刻暴露问题,而不是让用户盯着空白发呆。



















