轮播图核心是准确维护当前显示图片的索引，而非动画效果；需用 transform + transition 实现 GPU 加速位移，克隆首尾项实现无缝循环，并精准管理 transitionend 事件与定时器。
轮播图不是“自动播放的视频”，而是靠 JavaScript 控制一组 <img> 或 <div> 的显隐或位移状态，配合 CSS 过渡实现视觉切换。核心在于「哪张图该在可视区」这个索引的准确维护，而不是动画本身有多酷。
transform + transition 是平滑位移的关键
直接改 left 或 margin-left 会触发重排（reflow），性能差；用 transform: translateX() 能走 GPU 加速，且不干扰文档流。所有图片必须水平排列成一行，容器设 overflow: hidden，再通过偏移量控制显示位置。
- 每张图宽度必须严格一致（如统一设
width: 100vw或固定像素值），否则translateX(-index * width)计算会错位 - 不要用
width: 100%或flex: 1，克隆项宽度易因父容器计算偏差导致跳变 - 过渡时间写死在 CSS 里（如
transition: transform 0.3s ease-in-out），JS 只负责改style.transform
无缝循环必须手动克隆首尾项
浏览器不会自动把最后一张图接回第一张。DOM 只有 [0][1][2] 三张图时，从 2 切到 0 必然跳变。可靠方案是克隆为 [2][0][1][2][0]，共 n + 2 项，让视口始终在“真实内容段”内滑动。
- 首项克隆放最前，末项克隆放最后，顺序不能反
- 初始
transform应设为translateX(-100%)（跳过 fake-first） - 边界重置不能靠
setInterval定时触发，必须监听transitionend事件，在动画结束瞬间执行 - 重置前要临时关掉过渡：
el.style.transition = 'none'；重置后用setTimeout延迟 1ms 恢复，确保重绘完成
交互时定时器管理最容易出错
用户连点左右按钮或小圆点，若不清理旧定时器，会导致多个 setInterval 并发、索引错乱、动画撕裂。
立即学习“前端免费学习笔记（深入）”；
- 每次点击/触摸前，必须先
clearInterval(timerId) - 交互完成后，不要立刻重启定时器——等当前
transitionend触发后再调用startTimer() - 悬停暂停用
mouseenter/touchstart，恢复用mouseleave/touchend，别漏掉移动端事件
真正卡住人的地方，往往不是怎么让图动起来，而是索引和 DOM 状态是否始终同步、克隆项宽度是否严格一致、以及 transitionend 和定时器的协作时机是否精准——这些细节一错，轮播就会在边界处闪、跳、卡顿，且很难定位。
