如何用javascript实现图片轮播效果？_如何管理定时器和切换状态？【教程】
图片轮播关键在稳定性：需用变量保存setInterval返回值并配对clearInterval，维护currentIndex单一状态源，用setTimeout递归替代setInterval以避免动画撕裂，组件卸载时必须清除定时器防止内存泄漏。
用 JavaScript 实现图片轮播，关键不在“怎么动”，而在“怎么稳”——定时器管理不当会导致内存泄漏、切换卡顿、用户交互冲突；状态混乱会让点击下一张后自动播放错乱。下面直奔实操要点。
用 setInterval 启动轮播，但必须配对 clearInterval
轮播本质是周期性调用切换函数，但很多人只写 setInterval，不存引用，导致无法停止：
- 必须把
setInterval的返回值（一个数字 ID）保存为变量，比如let timerId = setInterval(...) - 每次重新开始轮播前，先执行
clearInterval(timerId)，否则旧定时器还在跑，新旧叠加会加速切换 - 用户鼠标悬停时暂停，移出后恢复，不能简单地再启一个
setInterval，而应clearInterval后按剩余时间重设（或用setTimeout递归替代）
切换状态要用单一可信源，别靠 DOM 判断
轮播的“当前显示第几张”这个状态，如果每次从 document.querySelector('.active') 反推索引，容易因 DOM 更新延迟或 class 漏加/多加而出错。
- 维护一个纯 JS 变量，如
let currentIndex = 0，所有切换逻辑（点击、自动、键盘）都先更新它，再同步 DOM - 切换函数里加边界检查：
currentIndex = (currentIndex + 1) % imageList.length比if (currentIndex === ...)更简洁可靠 - 禁用按钮状态也由该变量驱动：比如
prevBtn.disabled = currentIndex === 0，而不是监听 class
用 setTimeout 递归替代 setInterval 更可控
虽然 setInterval 看似直接，但它不感知切换是否完成。图片淡入动画未结束就触发下一次切换，会造成视觉撕裂。
- 改用
setTimeout在每次动画结束后再调度下一次，例如在transitionend或img.onload后调用setTimeout(nextSlide, delay) - 这样能自然避开动画未完成就切图的问题，也方便在用户操作后取消待执行的
setTimeout（只需clearTimeout(timeoutId)） - 注意：递归调用要防止无限栈增长，确保每次只设一个
setTimeout，且清除逻辑覆盖所有出口（如手动切换、销毁组件）
最易被忽略的是“销毁”环节：页面卸载或轮播组件被移除时，必须显式 clearInterva 或 
clearTimeout，否则定时器持续运行，引用的 DOM 节点无法 GC，长期驻留内存。这点在 SPA 中尤其关键。
