移动端轮播图核心是保障流畅交互：需禁用原生滚动干扰（passive: false、touchMoveStopPropagation: true），避免加载抖动（aspect-ratio/伪元素占位）、自动播放需响应用户操作并延迟重启（≥1.5秒）。
移动端轮播图的核心不是“怎么动”，而是“怎么不卡、不误触、不闪屏、不抢焦点”。用 swiper 是最省心的方案，但必须配对启用 touchMove 阻断和 passive: false，否则 iOS Safari 会强制忽略 preventDefault() 导致拖拽失效。
用 Swiper 7+ 实现真·移动端友好轮播
Swiper 7 开始默认启用 passive: true，这在 iOS 上会让 touchstart 无法调用 preventDefault()，结果就是：手指一滑，页面跟着上下滚动，轮播图纹丝不动。
- 必须显式设置
passive: false（Swiper 初始化时传入） - 禁用浏览器原生滚动干扰：
touchMoveStopPropagation: true - 启用
watchSlidesProgress: true才能做视差或淡入淡出动画 -
speed: 300是安全值；超过 400 在低端 Android 上易掉帧
const swiper = new Swiper('.swiper', {
slidesPerView: 1,
spaceBetween: 0,
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
passive: false,
touchMoveStopPropagation: true,
speed: 300,
});不用框架？纯 CSS + JS 的最小可行方案
仅靠 transform: translateX() + touchstart/touchmove/touchend 能跑，但要避开三个坑：
- 未加
{ passive: false }到addEventListener→ iOS 拖不动 - 未在
touchmove中调用event.preventDefault()→ 页面滚动盖过轮播 - 未用
requestAnimationFrame更新位移 → 动画卡顿、跳帧
关键点：位移计算必须基于 touchstartX - touchmoveX 差值，不能直接用 clientX；且结束时要判断滑动距离是否超阈值（建议 50px），再决定是否切图。
立即学习“前端免费学习笔记（深入）”；
图片懒加载与宽高比失真的修复
移动端轮播图最常被忽略的是图片加载抖动——图片没加载完时容器高度塌陷，导致页面跳动。解决方式不是等图片 onload，而是：
- 给每张
loading="lazy"和decoding="async" - 用
aspect-ratio: 3 / 2（支持 Chrome 88+/Safari 15.4+）或伪元素占位（兼容老版本） - 禁用
img { max-width: 100% }，改用width: 100%; height: auto;配合父容器overflow: hidden
否则 iOS 微信内嵌 WebView 下，max-width 会触发重排，放大图片时出现模糊。
自动播放与用户交互的冲突处理
移动端自动轮播必须响应用户操作：手指一碰就停，松开后延时重启。但不能简单用 swiper.autoplay.stop()，因为：
- 用户快速划两下，
autoplay.start()可能覆盖还在执行的stop() - 从后台切回前台时，需重新校准 autoplay 时间（iOS Safari 会冻结定时器）
- 屏幕阅读器用户需要
aria-live="polite"提示当前页码
推荐做法：用 clearTimeout(autoplayTimer) + setTimeout 重启，并监听 visibilitychange 事件重置计时器。
真正难的不是让图动起来，是让动的过程不打断用户意图——比如滑到第二张时想点链接，结果手一抬轮播又切走了。所有自动行为都得有明确的暂停出口，且延迟重启时间别低于 1.5 秒。
