setinterval是最可靠可控的自动播放实现方式，因css动画无法响应悬停暂停、动态增删图、精准跳转等交互需求，且缺乏currentindex状态支持后续功能扩展。
setInterval 是目前最可靠、最可控的自动播放实现方式，纯 CSS 动画（@keyframes + animation）虽能“看起来”在播，但无法响应用户悬停、点击、动态增删图等真实需求，项目中不推荐作为主方案。
为什么不能只靠 CSS 实现真正可用的自动播放
CSS 轮播依赖预设的 @keyframes 和固定 animation-delay，所有切换节奏硬编码在样式里：
- 图片数量变化时，必须手动重写全部
@keyframes规则和nth-child选择器 - 用户鼠标悬停后无法暂停——
animation-play-state: paused只能整体停，不能精准控制“当前帧” - 点击指示点跳转时，CSS 动画会强行“挤”进当前时间轴，导致错帧、闪动或卡住
- 没有
currentIndex状态，后续加播放/暂停按钮、API 控制、无障碍焦点管理都无从下手
setInterval 启动自动播放的关键写法
不是简单写 setInterval(changeImage, 3000) 就完事，漏掉这几步容易引发内存泄漏或重复定时器：
- 用
let intervalId = null声明全局变量，保存定时器 ID - 每次调用自动播放前，先执行
clearInterval(intervalId)，再赋新值 - 在悬停（
mouseenter）时调用clearInterval(intervalId)，移出（mouseleave）时重新setInterval - 页面卸载前（如 SPA 路由跳转），需手动清理：
window.addEventListener('beforeunload', () => clearInterval(intervalId))
用 requestAnimationFrame 替代 setInterval 的适用场景
当轮播图嵌在高帧率动画区域（如 Canvas 渲染页、滚动视差页），或需要严格对齐屏幕刷新节奏时，setInterval 可能丢帧、跳秒：
- 不要直接替换为
requestAnimationFrame循环调用——它不带延时，会疯狂触发 - 正确做法是组合使用：
setTimeout(() => requestAnimationFrame(animateSlide), delay) - 其中
delay应略大于目标间隔（如 3000ms 设为 3050），留出 JS 执行余量 - 此方式无法替代
setInterval的语义清晰性，仅用于性能敏感路径，普通轮播没必要上
首尾衔接跳变、图片闪动的常见原因
不是动画没写好，而是 DOM 更新与 CSS 过渡时机没对齐：
- 切图前未将下一张图
opacity设为 0 或visibility设为hidden，导致两张图短暂叠加显示 - 使用
transform: translateX()时，未给容器设置will-change: transform，触发重排而非 GPU 加速合成 - 图片未预加载，
src切换瞬间为空白，应提前用new Image().src = url缓存 - 未处理循环边界：索引从最后一张切回第一张时，直接跳
translateX(0)，缺少“克隆首图到末尾”的无缝位移逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
