无缝轮播必须克隆首尾图使dom含n+2项，位移严格按运行时获取的真实像素宽计算，边界重置监听transitionend事件，交互后需清除并重启自动轮播。
克隆首尾图是硬性要求，不是可选项
DOM里只有原图时，切到末尾再往右，浏览器只能跳回第一张——这不是“慢”，是逻辑断层。无缝的本质是让用户找不到起点和终点，而这个视觉连续性必须靠克隆来补全。
克隆规则很明确：克隆最后一张图插入开头，解决向左切时的右跳；克隆第一张图追加到末尾，解决向右切到尽头时的左跳。真实图片数为 n，DOM 中必须有 n + 2 项，但用户永远只看到中间那 n 张。
常见错误包括：只克隆一头、克隆顺序颠倒（比如把第一张插开头、最后一张插末尾）、或克隆后没重置初始位移。这些都会导致切换瞬间露黑边或半张图。
位移计算必须用真实像素宽度，别信百分比
transform: translateX() 的每次位移量，必须严格等于单张图的像素宽（含 padding/margin）。写死 translateX(-800px) 在响应式页面里会崩；用 translateX(-100%) 更危险——它依赖父容器宽度，而父容器若受缩放、字体渲染、小数像素截断影响，0.5px 偏差就会在循环时变成明显空白。
正确做法是运行时读取：const width = slides[0].getBoundingClientRect().width。这个值要存下来复用，别每次切换都重算。
初始位移设为 -width（对应克隆的最后一张图在最左），向右切就 += width，向左切就 -= width。任何偏差都会让克隆图错位，后续所有切换都偏移。
重置边界要用 transitionend，不是 setInterval
当滚动到克隆末项（索引 === n）或克隆首项（索引 === 0）时，不能靠定时器强行跳转——网络卡、CPU 负载高时，setInterval 仍准时触发，可能打断动画，造成撕裂。
必须监听 transitionend 事件，在动画真正结束那一刻检查位置：
- 若到达 fake-last（即 DOM 索引 ===
n），立刻el.style.transition = 'none' - 瞬移
el.style.transform = `translateX(${-width}px)`（回到第一张真实图位置） - 再用
setTimeout(() => { el.style.transition = 'transform 0.3s ease-in-out' }, 10)恢复过渡 - 记得用
{ once: true }防止重复绑定
Safari 需兼容 webkitTransitionEnd，建议封装成统一事件名变量。
手动交互后自动轮播必须彻底重置
用户点了一次“下一张”，如果自动轮播还在跑，下一秒又切，不是功能叠加，是状态冲突。常见错误是：setInterval 返回值没存，导致 clearInterval 失效；或重置索引前就重启定时器，造成错位。
安全流程是：
- 点击/触摸前，先
clearInterval(timerId) - 执行位移、更新当前逻辑索引（注意映射：DOM 索引 2 可能对应原图索引 1）
- 等
transitionend触发后，再调用startAutoPlay()
移动端还要加 e.preventDefault() 阻止 iOS 页面滚动，且方向判断只看 touchend - touchstart 差值，绝对值小于 50 就忽略——否则手指轻微抖动就误切。
最易被忽略的是图片加载完成前的占位：如果首屏 img 还没加载完，flex 容器高度塌陷，整个动画会抖动甚至失效。显式声明 width/height 或用 aspect-ratio 预留空间，比等 onload 再 layout 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
