轮播图卡顿或切换生硬，主因是CSS过渡属性与JS动画节奏未对齐：需统一transition与speed、避免触发布局、合理使用will-change和requestAnimationFrame、处理visibilitychange、配置touch-action与passive事件、控制图片加载时机。
轮播图卡顿或切换生硬，大概率是 CSS 过渡属性没对齐 JS 动画节奏
HTML5 页面里用 swiper、owl.carousel 或手写 setInterval + transform 轮播时，视觉“卡”“跳”“拖影”，90% 不是 JS 逻辑错，而是 CSS 的 transition 和 JS 改变的样式没协同好。
常见表现：transform: translateX() 突然跳变、滑动半途停住、快速连点后位置错乱。
- 检查轮播容器是否加了
will-change: transform（尤其在移动端 Safari 上能缓解重绘抖动） - 确保所有过渡都限定在
transform和opacity上，避免触发布局（width、left、top等会强制重排） - 如果用
requestAnimationFrame手写动画，别在每一帧都读取offsetLeft或getBoundingClientRect()—— 这会强制同步回流 -
swiper用户注意：默认speed: 300是毫秒，但若 CSS 中写了transition: all .3s，两者不一致就会打架；统一改成transition: transform .3s ease-out
autoplay 停了或间隔不准，先查定时器是否被节流或销毁
很多轮播插件依赖 setInterval 或 setTimeout 驱动自动播放，但在 SPA 页面切换、Tab 切换、页面冻结（visibilitychange）等场景下，定时器可能被浏览器挂起或未清理。
- 监听
document.hidden或visibilitychange事件，在页面不可见时暂停autoplay，可见时恢复（swiper有disableOnInteraction: false和watchVisibility: true可配） - 手写轮播时，别直接
clearInterval(timer)后不重置状态变量，容易导致next()调用时索引错位 - Chrome 88+ 对后台 Tab 的
setTimeout最小间隔提升到 1000ms，若设autoplay: 2000还算稳，但设成300就必然不准 —— 改用requestAnimationFrame驱动更可靠
触摸滑动不跟手、响应延迟，重点看 touch-action 和 passive 事件监听
移动端轮播最典型的“滑不动”“要按住才动”问题，基本锁定在原生事件拦截策略上。
