克隆首尾图是实现真正无缝轮播的必要步骤，因它通过在DOM中添加首尾副本，使视觉上无法识别切换起点与终点；配合transform: translateX()精确位移和索引映射，解决左右切换时的跳帧与撕裂问题。
直接用 transform + 克隆首尾图 + 逻辑索引映射，就能实现真正无缝的左右按钮轮播。靠 margin-left 或 left 动画会卡顿、跳帧，且无法解决首尾衔接撕裂问题。
为什么克隆首尾图是必须步骤
无缝的本质不是“快”，而是让视觉上找不到切换起点和终点。真实 DOM 中只有 5 张图，但轮播逻辑需要“第 0 张”在第 4 张之后、“第 4 张”在第 0 张之前——这只能靠克隆实现。
- 克隆第一张图追加到末尾，解决从最后一张切回第一张时的左跳问题
- 克隆最后一张图插入开头，解决从第一张向左切时的右跳问题
- 真实图片数为
n，DOM 中实际有n + 2项，但用户永远只看到中间n张 - 索引映射：点击“第 0 张”时，实际移动到克隆后的第 1 张（即原第 0 张）；切到“第 n-1 张”时，实际停在克隆前的第 n-1 张，而非末尾克隆图
transform: translateX() 的位移计算不能错
每次点击按钮，位移量必须严格等于单张图宽度（含 margin/padding），否则克隆图对齐会偏移，出现半张图露头或黑边。
- 用
getBoundingClientRect().width动态读取第一张图宽度，比写死800px更可靠（尤其响应式场景） - 向右切：位移 += 图宽；向左切：位移 -= 图宽
- 初始位移设为
-图宽，让第一张图正好居中显示（对应克隆的最后一张图在最左） - 禁止使用
left或margin-left：它们触发重排，动画不流畅，且无法配合will-change: transform硬件加速
按钮点击后自动轮播必须重置
用户点了一次“下一张”，如果自动轮播还在跑，下一秒又切，体验混乱。这不是功能叠加，而是状态冲突。
立即学习“前端免费学习笔记（深入）”；
- 每次点击
next或prev按钮，先执行clearInterval(timer) - 更新当前索引（注意映射后的真实索引，比如 DOM 第 2 张可能是原图第 1 张）
- 再调用
startAutoPlay()重启定时器，从新位置继续计时 - 常见错误：
setInterval没存引用，导致无法clearInterval；或重置索引前就重启定时器，造成错位
移动端 touch 操作容易忽略方向阈值
手指一滑就切图，极易误触。真正的滑动切换，关键在松手瞬间判断方向，而不是跟踪滑动过程。
- 记录
touchstart的clientX，在touchend时再读一次，差值绝对值< 50就忽略 - 差值 > 50 且为负 → 向左滑 → 触发
next；为正 → 向右滑 → 触发prev - 必须加
e.preventDefault()，否则 iOS 上会触发页面滚动 - 别在
touchmove里做位移，那属于拖拽预览，不是轮播切换逻辑
克隆图数量、位移精度、定时器管理、touch 阈值——这四个点任一出错，无缝就变成“缝很大”。尤其要注意索引和 DOM 位置的映射关系，调试时多打 console.log(currentIndex, realIndex)，比猜快得多。
