轮播图应优先用 requestAnimationFrame 配合时间戳切换，或用 visibilitychange 暂停/恢复 setInterval；伪无限滚动需 cloneNode 补首尾项并正确映射索引；指示器点击须用事件委托和 dataset.slideIndex；移动端滑动需 preventDefault 并用 clientX 与 getBoundingClientRect 精确计算。
轮播图核心逻辑：用 setInterval 还是 requestAnimationFrame？
直接用 setInterval 做自动轮播，看似简单，但容易出问题：页面切到后台时定时器仍运行，回来后可能连跳多张；动画卡顿时还会累积延迟。更稳妥的做法是用 requestAnimationFrame 配合时间戳判断是否该切换，或者退而求其次——在 visibilitychange 事件中暂停/恢复 setInterval。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 监听
document.addEventListener('visibilitychange', ...)，document.hidden为true时clearInterval，恢复时重设 - 切换逻辑别写在
setInterval回调里直接改 DOM，先更新索引（currentIndex），再统一触发渲染函数，方便后续加动画、防抖或状态同步 - 如果用 CSS transition 动画，确保容器有
will-change: transform或启用 GPU 加速，避免 iOS Safari 下卡顿
无缝滚动怎么破：cloneNode 还是 transform 位移？
真正“无缝”不是靠视觉错觉，而是数据层补足。常见错误是只复制首尾两张图却忘了更新 currentIndex 映射关系，导致点选指示器时跳转错乱。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 采用「伪无限」方案：DOM 中真实存在
items.length + 2个节点，首尾分别是最后一项和第一项的克隆（用cloneNode(true)） - 初始
transform: translateX(-100%)，让视觉起点落在第一个克隆项上；切换到末尾时，立刻translateX(-${items.length}00%)并重置为-100%，肉眼不可见 - 不要用
left/right百分比做定位——IE 不支持，且无法触发硬件加速
点击指示器跳转失败？检查 event.target 和 dataset 绑定
很多人给 .indicator 元素绑定 click，但实际点击的是内部的 span 或 i，导致 event.target 不是预设的按钮节点，dataset.index 取不到值。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 统一用事件委托：
indicatorsContainer.addEventListener('click', e => { const btn = e.target.closest('.indicator'); if (btn) gotoIndex(btn.dataset.index); }) -
dataset的 key 必须是小写中划线（如data-slide-index="2"），JS 中读作btn.dataset.slideIndex，大小写敏感 - 切换前加节流：
if (isTransitioning) return;，避免快速连点导致transform值混乱
移动端滑动卡顿？别只加 touchstart/touchmove
原生 touch 事件默认会触发滚动，不阻止就会和轮播手势冲突；而且单纯用 pageX 计算位移，在部分安卓机型上会因缩放或高 DPR 屏幕失准。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 在
touchstart里立刻调用e.preventDefault()，并记录e.touches[0].clientX - 用
getBoundingClientRect().left算容器左偏移，再结合touches[0].clientX得相对位移，比纯pageX更稳 - 松手后判断滑动距离是否超过阈值（如 30px）、速度是否达标（用两次
touchmove时间差算），再决定是切换还是回弹
let startX = 0;
let isDragging = false;
<p>slider.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
isDragging = true;
e.preventDefault();
});</p><p>slider.addEventListener('touchmove', e => {
if (!isDragging) return;
const moveX = e.touches[0].clientX - startX;
// 更新 transform: translateX(${currentX + moveX}px)
});</p><p>slider.addEventListener('touchend', () => {
if (!isDragging) return;
isDragging = false;
// 判断 moveX 决定是否切换
});轮播图最难的不是动效，是各种边界条件：切页时用户正在拖拽、自动轮播和手动操作的优先级、缩略图与大图索引不同步……这些地方没日志、不模拟弱网和低性能设备，上线后必踩坑。
