用 display: none 切换轮播图最稳，因其彻底移出渲染流、不占布局空间且事件安全；需配合固定容器高度、定时器清理、语义化按钮及图片加载兜底。
直接用 display: none 切换图片最稳，别一上来就搞 transform 动画或第三方库——先让三张图能正确轮着显示，再加效果。
为什么用 display: none 而不是 opacity 或 visibility
因为轮播的核心是“只显示一张”，不是“看起来像切换”。opacity: 0 还占事件流、可能被误点；visibility: hidden 仍占布局空间，容易撑高容器导致页面跳动；而 display: none 真实移出渲染流，父容器高度稳定，JS 控制也最轻量。
- 所有
<img>默认加style="max-width:90%"，第一张额外加style="display: block;" - 切换时必须先遍历清空所有
display: block，再设目标索引为block，顺序反了会残留上一张 - 给轮播容器（如
<div class="carousel">）设固定高度，比如 <code>height: 400px，避免重排抖动setInterval启动前必须clearInterval写
setInterval(switchImage, 3000)是常见翻车点：用户点按钮后定时器没停，鼠标悬停时还在切，甚至多个定时器并发跑。实际必须用变量存住句柄，并每次启动前清理。- 定义全局变量
let carouselTimer = null - 每次调用
setInterval前先执行clearInterval(carouselTimer) -
mouseenter时清定时器，mouseleave时重设（注意移动端无 hover，可不处理） - 手动点击左右按钮后，也要立刻调用
resetTimer()，否则刚切完第2张，0.5秒后又跳到第3张
导航按钮必须用
<button type="button"></button>别用
<a></a>或无type的<button></button>，否则 JS 失效或报错时，点击会触发页面跳顶、刷新或默认提交行为。- 每个按钮带
data-index="0"、data-index="1"等，方便 JS 直接读取目标索引 - 禁用状态用
disabled属性，而不是仅靠 CSS 灰掉——它真正阻止交互且语义正确 - 不要把图片塞进
<picture></picture>或<source></source>里起步，初学先关掉响应式复杂性，用固定宽高的<img src="" style="max-width:90%" style="max-width:90%">
最易被忽略的是图片加载状态：
img.complete不是 always true，网络慢或图片路径错时，display: block一设就是空白帧。上线前务必在弱网下测一遍，或加个onload回调兜底。 - 定义全局变量
