最快速实现自动轮播的方案是用setInterval配合display:none/block切换图片，3分钟内可完成，无需引入库；所有img默认display:none，首张设block，JS仅遍历设显隐，容器需固定高度防跳动，定时器必须用clearInterval清理，结构保持扁平简洁。
直接用 setInterval + display: none/block 切换是最快速能跑通的方案，3 分钟内可完成基础自动轮播，无需引入任何库。
用 display 切换图片最省事
别碰 transform、opacity 或 CSS 动画——它们要配 transition、算偏移、处理重绘，初期纯属增加失败概率。先让“只有一张图显示”这件事稳住，再优化动效。
- 所有
<img>默认加style="display: none;"，第一张额外加style="display: block;" - JS 里只做两件事：遍历所有
<img>设display: none，再给目标索引那张设display: block - 容器必须设固定高度（如
height: 400px），否则display切换会触发重排，页面跳动 - 别用
visibility: hidden—— 它占位，可能撑高容器；也别用opacity: 0—— 透明但还能响应点击
setInterval 必须配 clearInterval 清理
只写 setInterval(switchImage, 3000) 是埋雷行为：用户点下一张后，旧定时器还在跑，几秒后又切一次，逻辑彻底失控。
- 定义全局变量
let carouselTimer = null - 每次启动前先执行
clearInterval(carouselTimer) - 在
next()、prev()和鼠标悬停恢复时，都调用resetTimer()（内部含清空+重启） - 不要用
setTimeout递归模拟轮播——堆栈易溢出，且无法统一销毁
结构用 <div class="carousel"> 包 <img> 最直白
别套 <ul><li>、别塞 <picture>、更别一开始就搞懒加载属性——这些都会干扰初始调试节奏。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构就三行：
<div class="carousel"><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"></div> - 每张图带
alt和显式宽高（如width="600" height="400"），防布局抖动 - 导航按钮用
<button type="button">，不是<a>或<div>，避免默认跳转或焦点问题 - JS 选元素用
document.querySelectorAll('.carousel img')，别用getElementsByClassName返回类数组，后续.forEach会报错
真正卡住人的从来不是“怎么动起来”，而是“为什么这张没显示”或“为什么连切三张”。把 display 切换路径压到最短、定时器清理写死、结构保持扁平，就能绕开 80% 的新手陷阱。
