模运算处理索引最稳，如(currentindex + 1) % totalslides可防越界；需配合状态锁、位移精度控制及避免回流等策略，才能在真实场景中不跳不卡不崩。
直接用模运算处理索引，比复制 DOM 或手动重置更稳、更少 bug。关键不是“看起来无限”，而是状态不崩、跳转不卡、缩放/切 tab 后不丢帧。
用 % 运算实现索引循环（JS 核心）
所有「轮播停止在最后一张」或「点下一页报 Cannot read properties of undefined」的问题，根子都在越界访问数组。比如有 5 张图，索引是 0–4，但代码写了 allSlides[currentIndex + 1]，当 currentIndex === 4 时就炸了。
-
(currentIndex + 1) % totalSlides自动把4 + 1 = 5变成0，0 - 1 = -1变成4，无需 if 判断 - 别在动画里反复读取
allSlides[i].offsetWidth——它触发回流，低端机卡顿明显；宽度写死或用 CSS 变量传入 - 如果用了
transform: translateX()移动整个容器，也要同步用模运算算目标位移：translateX(-${(nextIndex * slideWidth)}px)
纯 CSS 水平无限滚动（无 JS，适合 banner）
不用 JS 就能跑得最稳，但只适用于内容固定、尺寸可控的场景，比如横幅图、产品卡片列表。
- HTML 中把内容复制两份：
<div class="scroll-track"> <img><img><img><img> </div>→ 实际写两遍 - CSS 必须设
flex-shrink: 0和显式宽高（如width: 240px），否则 flex 会压缩总宽，导致动画终点错位 - @keyframes 终点值必须等于「单份内容总宽」：3 张图 × 240px + 2 个间隔 × 16px =
752px，动画写translateX(-752px)，差 1px 都会在接缝处露白 - 外层容器加
overflow: hidden，否则滚动中边缘会闪出空白
避免 clone DOM 的常见陷阱
很多人一上来就克隆首尾项（Slide 5 (clone) + 原始 1–5 + Slide 1 (clone)），结果维护成本飙升、响应式失效、Vue/React 中 key 冲突。
- 克隆后要给副本加
data-clone="true"，否则querySelectorAll('.slide')会把副本也算进去，totalSlides算错 - 滚动到 clone 项时，不能直接
remove()——用户可能正在拖拽，突然删 DOM 会导致 touchend 事件丢失、位置漂移 - 更安全的做法是：用
visibility: hidden+pointer-events: none临时隐藏 clone 项，等动画结束再清理 - 如果轮播图嵌在
position: sticky或transform容器里，clone 项可能因层叠上下文错位，务必检查z-index和will-change
自动轮播 + 手动操作共存时的状态同步
用户刚拖完，定时器又触发一次 sliding()，两张图同时动，视觉撕裂。这不是动画没设 transition，而是状态没锁住。
- 加一个
isSliding标志位，每次开始移动前设为true，动画结束（用transitionend或setTimeout）再设回false - 手动点击下一页时，先
clearInterval(autoTimer)，等本次滑动完成再重启，否则容易堆叠多个定时器 - 触摸拖拽中禁止自动播放：监听
touchstart设pauseOnTouch = true，touchend后延迟 3s 再恢复（防误触） - 别用
setInterval做轮播主逻辑——tab 切走再切回来，会一次性补全所有间隔。改用requestAnimationFrame+ 时间戳判断是否该切下一张
真正难的不是让轮播「动起来」，而是它在弱网、切后台、快速连点、缩放页面、屏幕旋转这些真实场景下，依然不跳、不卡、不崩索引。模运算是起点，状态锁和位移精度才是分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
