display: none 切换是最快速的轮播方案，核心是控制单张图片 display: block、其余 none，需固定容器高度、清理 setinterval 定时器、检查 img.complete 避免闪屏。
setInterval + display: none 切换是最快速能跑通的方案，不用引入任何库，5分钟内可完成基础自动轮播。
用 display: none 切换图片最省事
别碰 transform 或 opacity 动画起步——先让图“动起来”比“动得顺”重要得多。核心就是控制哪张图是 display: block，其余全 display: none。
- 所有
<img>放在同一个容器里，比如<div class="carousel"></div>，每张图独立写，不嵌套 - 初始状态统一加
style="display: none;"，第一张额外加style="display: block;" - 切换函数里先遍历所有
img设为none，再设目标索引那张为block，顺序不能反 - 容器必须设固定高度（如
height: 400px），否则display切换会触发重排、页面跳动
setInterval 必须配 clearInterval 清理
只写 setInterval(showNext, 3000) 是典型错误：用户点按钮后定时器还在跑，hover 时还在切，结果图片乱跳甚至卡死。
- 定义全局变量
let carouselTimer = null - 每次启动前先执行
clearInterval(carouselTimer)，再赋新值 -
mouseenter时清掉，mouseleave时重新setInterval（移动端可忽略 hover） - 手动点击左右按钮后，也要调用
resetTimer()—— 否则刚切到第2张，0.5秒后又切到第3张
图片加载没完成就切？加 img.complete 判断
网络慢时直接切 src，会出现空白帧或闪屏。尤其首屏轮播，用户一眼就注意到。
- 切换前检查
imgs[currentIndex].complete，为false就跳过本次切换 - 不要用
onload绑定每张图再启动轮播——首图没加载完，整个轮播就卡住 - 可配合
setTimeout重试（最多 3 次，每次间隔 200ms），避免无限等待 - 如果图太多或首屏外，建议后续加
IntersectionObserver控制是否启动定时器
按钮和结构别踩语义坑
看似只是个按钮，但没处理好会导致 JS 失效时页面不可用，或移动端行为异常。
- 左右箭头必须用
<button type="button"></button>，不是<a></a>或<div> <li>禁用状态用 <code>disabled属性，而不是仅靠 CSS 隐藏或加pointer-events: none - 每张图带
alt和明确宽高（如width="600" height="400"），防止布局抖动 - 别把多张图塞进一个
src属性里——<img src="a.jpg,b.jpg">完全无效
真正难的不是让图动起来，而是让动的过程不崩、不闪、不抢焦点、不浪费资源。很多项目卡在“怎么加过渡动画”，其实应该先盯住
img.complete 和 clearInterval 这两个点——它们不出错，轮播才真正算“可用”。
