轮播图卡顿主因是css过渡与js节奏不一致、dom重排、图片加载错乱及定时器管理混乱；应改用transform位移、设overflow:hidden、动态计算位移值、css写transition、清理定时器、暂停时保存剩余时间、预加载图片、禁用被动事件监听并处理触摸阈值与吸附逻辑。
轮播图卡顿不是代码写错了，而是几个关键点没对齐：CSS过渡和JS节奏不一致、DOM操作触发重排、图片加载时机错乱、定时器管理混乱。
transform位移比display切换更顺滑
用display: none/block切图会强制浏览器重排（reflow），尤其在图片尺寸不一致或容器高度未固定时，页面会“跳”。改用transform: translateX()只触发重绘（repaint），天然支持GPU加速。
- 轮播容器必须设
overflow: hidden，否则位移后图片会溢出 - 子项要加
flex-shrink: 0或white-space: nowrap防止被压缩 - 位移值严格按
-currentIndex * itemWidth计算，别硬写300px；用getBoundingClientRect().width动态读取更稳 - transition必须写在CSS里，比如
.carousel-track { transition: transform 0.4s ease-out; }，JS中改style.transition在Safari上可能失效
定时器必须清理干净再重设
常见翻车是setInterval没清掉，用户手动切了几张后，多个定时器同时跑，下一张突然跳回开头。更糟的是用setTimeout递归但忘了clearTimeout，旧任务还在后台执行。
- 每次启动前先
clearInterval(this.timer)，确保只有一个定时器活着 - 鼠标悬停暂停时，别只
clearInterval，还要保存当前剩余时间，移出后从原节奏继续，不是重置为3秒 - 推荐用
setTimeout链式调用：动画结束回调里再设下一次，避免节奏被手动操作打乱 - SPA页面切换或Tab失焦时，监听
visibilitychange事件，document.hidden为true就stop()，恢复时再start()
图片加载状态必须参与切换逻辑
轮播图一动就白屏，大概率是translateX执行了，但<img>还没加载完。浏览器不会等图片就位再渲染，也不会自动重试失败的请求。
- 切换前加判断：
if (!this.images[currentIndex].complete) return，跳过未加载完成的图片 - 给
<img>绑定load事件，加载成功后再把对应data-index标记为loaded，轮播逻辑只切已标记的项 - 首屏外的图片用
loading="lazy"，但轮播图建议预加载相邻1～2张，避免滑到边缘才开始下载 - 避免在
showSlides()里无条件重置所有.slide的display，强制隐藏/显示会干扰解码流程，尤其在移动端易卡顿
移动端触摸滑动容易误判和卡顿
手指一抬就跳两张，或者滑不动，基本锁定在touch-action和事件监听配置上。原生touchmove频率高，不做阈值判断就会累积多次触发。
- 轮播容器加CSS：
touch-action: pan-x（横向）或touch-action: none（完全接管），否则浏览器优先处理页面滚动 -
touchstart记下clientX，touchend算差值，绝对值小于30不触发切换 -
touchmove里必须e.preventDefault()，否则页面会跟着上下滚；如果用了{ passive: true }，就不能调preventDefault，得去掉passive或改用e.cancelable判断 - 滑动结束时，根据剩余偏移量决定吸附：比如
Math.abs(offset) > width * 0.3才切到下一张，否则回弹到最近位置
最常被忽略的是容器高度跳变——只要轮播项图片尺寸不一致，.carousel-item高度就会变，整个页面跟着抖。统一设height: 90vh + object-fit: contain能锁死高度，比任何JS适配都可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
