无缝切换需克隆首尾项并用transform位移+transitionend重置：dom实际n+2项，初始translatex(-100%)，动态读取宽度计算位移，重置前禁用transition再延迟恢复，严格管理定时器与索引映射。
无缝切换不是靠 CSS animation: infinite 或单纯用 setInterval 强行轮动就能实现的——首尾衔接处必然跳变。真正可靠的方案必须手动克隆 DOM、用 transform: translateX() 位移，并在动画结束时用 transitionend 瞬间重置位置。
为什么必须克隆首尾项
浏览器不会自动把最后一张图“接”到第一张图前面。如果 DOM 只有 [0, 1, 2] 三张图，切到第 2 张后再点“下一张”，逻辑上要回到 0，但视觉上就是左跳回起点，出现明显撕裂或黑屏。
- 克隆第一张图插到最前 → 解决向左切（prev）时右跳问题
- 克隆最后一张图追加到末尾 → 解决向右切（next）时左跳问题
- 真实图片数为
n，DOM 中实际是n + 2项，但用户永远只看到中间n张 - 初始
transform必须设为translateX(-100%)，跳过 fake-first，让原图第 0 张正好居中
位移计算和 transitionend 重置的关键细节
每次位移量必须严格等于单张图宽度（含 padding/margin），否则克隆项错位，会露半张图或留黑边。不能依赖写死的像素值，尤其在响应式场景下。
- 用
document.querySelector('.carousel-item').getBoundingClientRect().width动态读取宽度更可靠 - 重置前必须先设
element.style.transition = 'none'，否则会触发反向过渡动画 - 重置后需用
setTimeout(() => { element.style.transition = 'transform 0.3s ease-in-out' }, 10)延迟恢复 transition - 监听
transitionend要带{ once: true }，避免重复绑定；Safari 需兼容webkitTransitionEnd
交互操作中定时器和索引管理最容易出错
用户快速连点按钮或滑动时，若不清理旧状态，极易导致动画叠加、索引错乱、甚至多个 setInterval 并发运行。
- 每次点击/触摸前，必须先
clearInterval(timerId)，且要确保timerId是可访问的变量（不能定义在闭包里丢了引用） - 交互完成后，不要立刻重启定时器——等
transitionend触发后再调用startAutoPlay() - 索引映射必须清晰：DOM 第 0 项是 fake-last（原最后一张），第 1 项才是原第 0 张；切到 DOM 第
n项（fake-last）时，应瞬移回 DOM 第 1 项，而非原第 0 张 - 移动端滑动需加方向阈值：记录
touchstart.clientX，touchend时差值绝对值 50 才触发 next/prev
真正难的不是让图动起来，而是让边界重置那一下完全不可见——它发生在 16ms 内，没做对 transition 切换、没清对 timer、没算准克隆索引，人眼立刻能察觉卡顿或跳帧。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
