轮播图常见问题及解决方案：自动播放需用clearinterval清除旧定时器；动态dom需用事件委托或确保dom加载完成再绑定；滑动动画应使用transform替代margin-left；移动端拖拽需preventdefault并记录偏移量。
轮播图自动播放停不下来？检查 setInterval 是否被重复调用
常见现象是点击下一张后，图片切换变快、卡顿，甚至跳两张——大概率是每次交互都新建了 setInterval，但没清除旧的定时器。
- 始终用一个变量（如
let timer = null）保存当前定时器 ID - 每次启动前先
clearInterval(timer)，再重新赋值timer = setInterval(...) - 在组件销毁或用户手动暂停时，务必调用
clearInterval(timer)
否则多个定时器并发执行，逻辑就失控了。
左右箭头点击失效？确认事件委托或元素绑定时机
如果轮播图是动态插入 DOM 的（比如通过 innerHTML 或框架渲染），直接对 .prev-btn 写 document.querySelector('.prev-btn').addEventListener(...) 很可能查不到元素——因为脚本执行时节点还没生成。
- 确保 JS 在 DOM 加载完成后运行：
document.addEventListener('DOMContentLoaded', ...) - 或把脚本标签放在
</body>前 - 若元素动态增删，改用事件委托：
carouselContainer.addEventListener('click', e => { if (e.target.matches('.next-btn')) { ... } })
图片滑动生硬？别只靠 margin-left 动画
用 margin-left 或 left + position: relative 做位移，浏览器无法启用 GPU 加速，小屏设备上容易掉帧。
立即学习“Java免费学习笔记（深入）”；
- 优先使用
transform: translateX()，它触发合成层，性能更好 - 配合
transition: transform 0.3s ease-in-out实现平滑过渡 - 注意：每次切换要重置
transform值，不要叠加（比如从-100%切到-200%，而不是在当前基础上再减100%）
示例关键 CSS：
carousel-track {<br> display: flex;<br> transition: transform 0.3s ease-in-out;<br>}
移动端拖拽不跟手？监听 touchstart/touchmove 时忘了阻止默认行为
在手机上拖动轮播图时，页面跟着上下滚动，图片位移也断断续续——这是因为浏览器默认把 touch 事件当成了页面滚动操作。
- 在
touchstart和touchmove回调里加e.preventDefault() - 但注意：只对轮播容器内部的 touch 事件阻止，别影响外部可滚动区域
- 记录起始位置和移动偏移量，用
transform: translateX(calc(${currentX}px + ${deltaX}px))实现实时跟随 - 松手（
touchend）后根据拖动距离决定是否切图，而非强制归位
这点很容易被忽略，尤其在桌面端测试正常、一上真机就出问题的时候。
