最稳的轮播实现起点是用 display: none/block 切换图片，html用语义中立div包img并设显式宽高，js先清空再设目标索引，定时器需手动清理，容器高度必须固定。
直接用 display: none 切换图片是最稳的起点，别一上来就搞 transform 或 opacity 动画——先让“只显示一张图”这件事不翻车，再谈动效。
HTML结构：用 div 包 img，别套 ul 或 figure
轮播容器必须是独立、语义中立的 div，比如 <div class="carousel"></div>。里面直接放 img 标签，每张图带 alt 和显式宽高（如 width="600" height="400"）。
- 错误写法：
<img src="a.jpg,b.jpg,c.jpg">——src只认单个 URL，逗号分隔无效 - 别用
<picture></picture>或<source></source>开头就上响应式，初学先锁死尺寸 - 导航按钮统一用
<button type="button" data-index="0"></button>，不用<a></a>或<span></span>，避免默认跳转或焦点干扰 - 所有
img初始状态加style="display: none;"，第一张额外加style="display: block;"
JS控制显隐：先清空再设目标，顺序不能反
核心逻辑就是两步：遍历所有 img，设 display: none；再把目标索引那张设为 display: block。用 style.display 直接操作最快，也最可控。
- 别用
visibility: hidden—— 它占位，可能撑开父容器高度，导致页面跳动 - 别用
opacity: 0—— 图片仍可被点击、聚焦，且需额外加transition才有动画 - 索引越界时用取余处理：比如 3 张图，
next()到第 4 张就自动回到第 0 张：currentIndex = (currentIndex + 1) % slides.length - 切换函数建议封装成
showImage(index)，方便被定时器、按钮、键盘事件复用
自动轮播：setInterval 必须配 clearInterval 清理
只写 setInterval(switchImage, 3000) 是危险操作。用户点按钮、鼠标悬停后定时器还在跑，会导致多张图乱切、索引错乱甚至内存泄漏。
- 定义全局变量
let carouselTimer = null - 每次启动前先
clearInterval(carouselTimer)，再赋新值：carouselTimer = setInterval(...) - 给
.carousel绑mouseenter（暂停）和mouseleave（恢复），移动端可忽略 - 手动点击左右按钮或导航点后，必须调用
resetTimer()重置倒计时，否则刚切完立刻又切 - 绝对不要用
setTimeout递归模拟轮播 —— 容易堆栈溢出，且无法统一清理
CSS关键约束：容器高度必须固定
display 切换会触发浏览器重排（reflow），如果轮播容器高度不固定，每次切换都会导致页面上下抖动，体验极差。
- 给
.carousel显式设置height: 400px（按图片实际高度来） - 所有
img的宽高属性要一致，避免某张图加载慢或失败时撑开容器 - 如果真要响应式，等基础功能跑通后，再用媒体查询覆盖
height值，而不是靠aspect-ratio或padding-top百分比技巧 - 禁用图片懒加载（
loading="lazy"）或移除decoding="async"，防止首屏白屏或切换卡顿
最容易被忽略的是定时器清理时机和容器高度锁定——这两点不做好，轮播看着能动，但一交互就崩，一缩放就跳。先跑通静态切换，再加自动、再加动效，顺序错了，调试成本翻倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
