纯 css 实现不了真正意义上的无缝轮播；必须用 javascript 控制克隆、索引和瞬移重置，否则首尾切换必跳帧。
纯 CSS 实现不了真正意义上的“轮播”，只能做“滚动”；所谓“无缝轮播”必须用 JavaScript 控制克隆、索引和瞬移重置，否则首尾切换必跳帧。
为什么纯 CSS 滚动 ≠ 无缝轮播
CSS @keyframes 动画本质是单次循环：从 transform: translateX(0) 到 translateX(-100%) 后，浏览器会瞬间跳回起点，人眼可感知卡顿或露白。这不是性能问题，而是动画模型的硬限制。
- 横向跑马灯类效果（如公告栏）可用双份内容 +
translateX(-50%)模拟无缝，但这是“视觉欺骗”，不适用于用户主动点击切换的轮播场景 - 垂直滚动若用
translateY(-100%)，极易因line-height渲染误差导致一像素抖动，尤其在 Safari 和 iOS WebView 中 -
animation-play-state: paused只能暂停，无法响应“点到第 3 张就停住”这类精确控制需求
真正无缝轮播必须克隆首尾项
DOM 中原始图片数为 n，实际需渲染 n + 2 项：把最后一张图插入最前（cloneLast），第一张图追加到最后（cloneFirst）。视口始终滑动在中间 n 张“真实内容”上，边界切换时仅靠瞬移重置 transform 值，无过渡、无感知。
- 初始
transform必须设为translateX(-100%)，跳过开头的cloneLast，让第一张原图居中显示 - 向右切换时，位移增量 =
getBoundingClientRect().width（不能写死像素值，否则响应式下错位） - 到达末尾克隆项（索引 ===
n）时，立刻执行：element.style.transition = 'none'→ 设transform: translateX(-100%)→setTimeout(() => { element.style.transition = 'transform 0.3s ease-in-out' }, 10) - 监听
transitionend事件，而非setInterval；Safari 需兼容webkitTransitionEnd
左右按钮交互最容易踩的坑
用户快速连点“下一张”，若不清理定时器和校验状态，会导致动画叠加、索引错乱、甚至 DOM 位移值与逻辑索引完全脱节。
- 每次点击前必须先
clearInterval(timerId)，且确保timerId是闭包内可访问的变量（不能定义在函数作用域内） - 点击后不要立刻重启自动播放，要等当前
transitionend触发后再调用startAutoPlay() - 移动端
touchend判断方向时，差值阈值建议设为50px，小于该值忽略，避免误触；记得加e.preventDefault()阻止 iOS 页面滚动 - 禁止用
left或margin-left实现位移——它们触发重排，动画掉帧，且无法启用will-change: transform
最易被忽略的是“重置时机”：不是动画开始前、不是定时器触发时，而是 transitionend 回调里检查索引并瞬移。任何提前或延后的操作，都会让克隆项对不齐，出现半张图或黑边。这一步没有容错余地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
