移动端轮播图触屏滑动不生效，大概率是未监听touchstart/touchmove/touchend或漏掉e.preventdefault()；因手机浏览器默认不触发mousemove，必须用三段式处理：touchstart记startx，touchmove算偏移并preventdefault，touchend按slidewidth×0.3阈值判断切换。
移动端轮播图触屏滑动不生效，大概率是没监听 touchstart/touchmove/touchend，或漏了 e.preventDefault()。
为什么 mousemove 在手机上完全没用
手机浏览器默认不触发 mousemove，哪怕你绑了事件也收不到。这不是兼容性问题，是规范行为——手指触摸时只发 touch 系列事件。mousedown 和 mousemove 只在桌面模拟器里“看起来能跑”，真机必挂。
必须统一用以下三段式处理：
-
touchstart中记录e.touches[0].clientX为startX -
touchmove中只算偏移：offset = e.touches[0].clientX - startX，并立刻调用e.preventDefault() -
touchend中根据Math.abs(offset)判断是否切换，阈值推荐slideWidth * 0.3（slideWidth动态读取，别写死）
touchmove 里直接改 translateX 就会抖动
高频 touchmove 下反复设置 element.style.transform = `translateX(${x}px)`，会导致渲染线程被频繁打断，视觉上卡顿、松手后残留位移、甚至手指稍一停顿就“粘住”。
正确做法是：只在 touchmove 中更新一个临时偏移变量（如 currentOffset），把动画交给 requestAnimationFrame 或 CSS transition 驱动；touchend 后再决定是否跳转到整张图位置。
关键点：
- 禁止在
touchmove中操作 DOM 样式或 layout 属性（如offsetLeft） - 所有位移计算基于
clientX，不用pageX或screenX（受缩放/滚动影响） - 回弹动画必须用
transition或requestAnimationFrame，别用setTimeout模拟
滑完一张图，自动轮播突然抽搐
用户手动滑动结束，setInterval 还在按原节奏跑，下一次自动切换就会在动画中途插入，造成“两张图叠在一起”或“直接跳过当前页”。
根本原因是定时器和 UI 状态没对齐。解决方式不是暂停，而是重置：
- 每次
touchend或点击箭头后，先clearInterval(timer) - 再
timer = setInterval(nextSlide, 3000) - 更稳妥的做法是加个
isTransitioning锁：在动画开始时设为true，transitionend或 raf 结束时设回false，定时器只在!isTransitioning时触发
另外，页面切到后台再回来时，setInterval 可能被节流导致连切多张——得监听 visibilitychange，隐藏时 clearInterval，显示时重置。
圆点指示器点击失效或错位
点第 3 个点，图片切过去了，但高亮还在第 2 个，90% 是因为 data-index 和实际数组下标没对齐，或者点击事件里只改了 currentIndex，忘了同步更新 UI。
必须保证三件事在一次点击中同时完成：
- 更新
currentIndex（注意边界：Math.max(0, Math.min(slides.length - 1, index))） - 立即执行位移：
element.style.transform = `translateX(${-currentIndex * slideWidth}px)` - 遍历所有指示器节点，用
classList.toggle('active', i === currentIndex)同步状态
特别注意：data-index 必须从 0 开始，不能写成 data-index="1"；如果用了 querySelectorAll('.dot')，确保 NodeList 顺序和 slides 数组一致。
最易被忽略的点：轮播容器没设 overflow: hidden，滑出去的图会露在外面；Safari 上 transform 不触发重绘，得加 transform: translateZ(0) 或 will-change: transform 强制硬件加速。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
