纯HTML无法实现自动轮播，必须用JavaScript的setInterval；它兼容性好但易失控，需在DOM就绪后首次手动渲染、检查数组长度、暂停时clearInterval并置null、恢复时重新setInterval且同步当前索引。
纯 HTML 无法实现自动轮播，setInterval 是最直接、兼容性最好、也最容易失控的定时器选择——用对了稳如老狗，用错了三秒后图片就跳回第一张或卡死不动。
为什么不用 setTimeout 递归？
很多人写成“切完立刻 setTimeout(nextSlide, 3000)”，看似合理，但一旦用户手动切换、暂停再恢复，旧的 setTimeout 还在后台跑着，冷不丁触发一次，currentIndex 就被错乱覆盖。
-
setInterval只有一个 ID，clearInterval(timer)能彻底清干净 - 手动切换后必须先
clearInterval(timer)，再timer = setInterval(...)重启，否则状态不同步 - 如果用了
setTimeout递归，又没存它的返回值，那就等于放弃了控制权
setInterval 启动前必须做三件事
别急着 setInterval(nextSlide, 3000)，漏掉任何一项都会导致首帧错位、白屏、或多图同时显示。
- 确保 DOM 已就绪：把定时器逻辑放在
DOMContentLoaded或window.onload之后 - 手动调用一次
showSlide(currentIndex)，让第一张图立即渲染，而不是等 3 秒才出现 - 检查
slides.length > 0，空数组下currentIndex % 0会报NaN，直接崩
暂停/恢复时的定时器重建陷阱
鼠标悬停暂停不是“按个暂停键”那么简单：clearInterval 后不重设，恢复时就会断档；重设却不更新 currentIndex，下一张就切错。
立即学习“前端免费学习笔记（深入）”；
- 暂停时只做
clearInterval(timer); timer = null; - 恢复时必须重新赋值
timer = setInterval(nextSlide, 3000)，不能复用旧 ID - 如果暂停期间用户点过指示点，
currentIndex已变，恢复后要从新索引继续，而不是接着旧节奏走
定时器本身不难，难的是它和状态（currentIndex）、DOM（.active 类）、用户操作（点击、悬停）之间的耦合。只要有一处没同步，轮播就“活”得不像你预期的那样——它不会报错，只会静默错乱。
