移动端必须用 touchstart/touchmove/touchend 替代 mouse 事件；touchstart 记 clientx，touchmove 调 preventdefault 并只算偏移，松手后按比例阈值判断切换；容器需 overflow: hidden 且图宽一致；定时器须交互后重置；touchend 后须校准 currentindex、transform 和指示器状态。
touchstart/move/end 必须替代 mouse 事件
移动端手指滑动根本不会触发 mousedown 或 mousemove，只认 touchstart/touchmove/touchend。用鼠标事件写完一测手机就完全没反应，不是兼容性问题，是事件压根不发生。
关键操作点：
-
touchstart中立刻记录touches[0].clientX（别用pageX，缩放或滚动时会偏移） -
touchmove中必须调用e.preventDefault()，否则页面会跟着上下拖拽 -
touchmove只做偏移计算，不直接改transform——高频设置 style 会导致卡顿或残留位移 - 松手后用
Math.abs(offset) > slideWidth * 0.3判断是否切换，硬写50像素在 iPad 和小屏手机上表现差异极大
translateX + transition 要配 overflow: hidden 和固定宽度
图片横向排列靠 display: flex 或 white-space: nowrap，但容器必须设 overflow: hidden，否则滑出的图会露出来；每张图宽度必须一致，否则 translateX(-currentIndex * width) 算出来的位移会错位。
常见样式陷阱：
- 父容器没设
width或flex-basis，导致getBoundingClientRect().width拿到的是 0 - 用
%或vw设图宽，但 JS 里用offsetWidth读取整数像素，四舍五入后累计误差明显 - CSS 里写了
transition: transform 0.3s，但 JS 动态改style.transition—— Safari 会忽略，必须写死在 CSS 中
手动滑动后自动轮播节奏错乱怎么修？
用户滑完一张，setInterval 还按原节奏跑，下一张立刻“撞进来”，视觉上像抽搐。这不是动画问题，是定时器和状态没对齐。
必须在每次用户交互后重置定时器：
- 点击按钮、
touchend切图、甚至hover暂停，都要先clearInterval(this.timer) - 再重新
this.timer = setInterval(...)，不能只改currentIndex - 标签页切走再回来时，
setInterval可能被浏览器节流，要用document.addEventListener('visibilitychange', ...)监听并重置状态
松手后回弹不准或卡在半张图？
回弹逻辑不能靠 setTimeout 延迟执行，得用 transition 或 requestAnimationFrame 驱动。更关键的是：每次 touchend 后必须强制校准 currentIndex，否则手动滑动 + 自动播放混用几次，索引就和视觉彻底脱节。
校准动作要同步三件事：
- 更新
currentIndex（用Math.round()或阈值判断取整） - 立刻设置最终
transform: translateX(-currentIndex * slideWidth) - 同步更新所有指示器（比如
document.querySelectorAll('.indicator').forEach(...)）
最常被忽略的是第三点：点第 3 个圆点，图片切过去了，但高亮还留在第 2 个，往往因为 data-index 从 1 开始写，而数组下标是 0 起始。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
