用 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 占位图能立刻暴露问题，而不是让用户盯着空白发呆。
