真正无缝的HTML轮播图必须克隆首尾项并用transform: translateX()位移，在transitionend时瞬移重置；DOM不自动衔接首尾，克隆为[n-1,0,1,…,n-1,0]共n+2项，视口始终在真实段内滑动，边界切换无感知。
真正无缝的 HTML 轮播图，不能靠 animation: infinite 或简单改 left/margin-left 实现——那些方案在首尾衔接处必然跳变或卡顿。必须手动克隆首尾项、用 transform: translateX() 位移，并在 transitionend 触发时瞬移重置。
为什么必须克隆首尾 DOM 元素
浏览器不会自动把最后一张图“接”到第一张图后面。如果 DOM 只有 [0, 1, 2] 三张图，滑到索引 2 后再点“下一张”，只能跳回 0，人眼会看到明显回弹或黑屏。
克隆后变成 [2, 0, 1, 2, 0]（共 n+2 项），视口始终在“真实内容段”内滑动；边界切换时只需把 transform 从 translateX(-300%) 瞬间设为 translateX(-100%)，无过渡、无感知。
- 首项克隆放最前，末项克隆放最后，顺序不能错
- 初始
transform必须设为translateX(-100%)（跳过 fake-first） - 所有
.carousel-item宽度必须严格一致；别用width: 100%或flex: 1
用 transitionend 而不是 setInterval 驱动重置
用 setInterval 定时强制重置，会和动画节奏脱节：网络卡、CPU 负载高时，它仍准时触发，可能在动画中途打断，造成撕裂或卡顿。
立即学习“前端免费学习笔记（深入）”；
正确做法是监听 transitionend 事件，在每次位移动画结束时检查当前索引——若到达 fake-last（即索引 === n），立刻清除 transition、设新位置、再恢复 transition。
- 重置前必须先
element.style.transition = 'none'，否则会触发反向动画 - 重置后需用
setTimeout(() => { element.style.transition = 'transform 0.3s ease-in-out' }, 10)延迟恢复，确保样式重绘完成 - 只监听一次：
el.addEventListener('transitionend', handler, { once: true }) - 注意兼容性：
transitionend在 Safari 中可能是webkitTransitionEnd，建议封装统一事件名
手动交互时定时器管理最容易出错
用户快速连点左右箭头或小圆点，不处理好定时器，会出现动画叠加、索引错乱、甚至 clearInterval 清错 ID，导致多个定时器并发运行。
- 每次点击/触摸前，必须先
clearInterval(timerId) - 交互完成后，不要立即重启定时器——等当前动画彻底结束（即
transitionend后）再调用startTimer() - 悬停暂停用
mouseenter/touchstart，恢复用mouseleave/touchend
移动端 touch 操作要防误触和方向错判
手指一滑就切图，极易误触。真正的滑动切换，关键在松手瞬间判断方向，而不是跟踪滑动过程。
- 记录
touchstart的clientX，在touchend时再读一次，差值绝对值 - 差值 > 50 且为负 → 向左滑 → 触发
next；为正 → 向右滑 → 触发prev - 必须加
e.preventDefault()，否则 iOS 上会触发页面滚动 - 别在
touchmove里做位移，那属于拖拽预览，不是轮播切换逻辑
最常被忽略的是：克隆后的 DOM 项宽度必须和原图完全一致，哪怕 0.5px 偏差，都会导致位移错位、半张图露头或黑边。用 getBoundingClientRect().width 动态读取第一张图宽度，比写死像素值更可靠，尤其在响应式场景下。
