移动端轮播必须用 touchstart/touchend 监听拖拽，touchmove 中仅计算偏移并 preventdefault，touchend 再判断是否切换；容器需设 overflow: hidden；推荐 flex 布局配合 translatex 控制位移；手动操作后须清除并重置 setinterval，且加 istransitioning 锁防状态冲突。
移动端轮播必须用 touchstart/touchend，别碰 mousemove
手机上 mousemove 基本不触发，靠它做滑动等于没写。真要响应手指拖拽，只能监听 touchstart、touchmove、touchend 三个事件。但 touchmove 里不能直接改 transform——高频调用会导致位移抖动、松手后残留偏移、甚至卡死。
正确做法是：
- 在
touchstart记下e.touches[0].clientX为startX - 在
touchmove只计算当前偏移offset = e.touches[0].clientX - startX，并立即调用e.preventDefault()阻止页面上下滚动 - 在
touchend才决定行为：若Math.abs(offset) > slideWidth * 0.3（slideWidth动态读取，别写死），则切换；否则回弹
轮播容器 overflow: hidden 是硬性前提
没设 overflow: hidden 的轮播，滑出去的图片会露在容器外，视觉上就不是“轮播”，而是“一排图横着铺开”。这个样式必须加在最外层容器（比如 .carousel-container），不是 .slides 或 .track。
常见翻车点：
- 只给
.slides设了display: flex，但忘了父容器裁剪 - 用了
position: absolute布局，结果overflow: hidden失效（需确保父容器有明确宽高且非position: static） - 在 Safari 上遇到
transform不重绘，加transform: translateZ(0)或will-change: transform强制硬件加速
结构用 flex 横向排列 slides，别用绝对定位拼图
把所有图片塞进一个 .slides 容器，设 display: flex，每张图设 flex: 0 0 100%（即不伸缩、不压缩、占满视口宽度）。这样不用算每张图的 left 值，位移只靠 transform: translateX(-currentIndex * 100%) 控制，逻辑干净，兼容性也好。
对比绝对定位的问题：
- 需要手动维护每张图的
left值，索引一错全乱 - 响应式时宽度变化，
left值得重算，而 flex +translateX自动适配 - 动画卡顿风险高：
left触发重排，transform只走合成器
手动切换后必须重置 setInterval，否则轮播抽搐
用户点一次“下一张”，setInterval 还按原节奏跑，下一张就会在动画中途“挤进来”，看起来像帧率不稳。这不是 CSS 动画问题，是 JS 定时器和状态没对齐。
每次手动操作（按钮点击、触摸结束、圆点点击）后，都得：
- 先
clearInterval(timer) - 再
timer = setInterval(nextSlide, intervalMs) - 同时更新
currentIndex和 DOM 状态（比如指示点高亮、transform位移）必须同步完成，不能分两步异步执行
更隐蔽的坑是：快速连点两个圆点，isTransitioning 锁没加，导致位移被覆盖、视觉跳变。这个锁不是可选优化，是防止状态撕裂的必要手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
