轮播图自动播放停不下来是因为未保存定时器id，需用变量存储并清除；requestanimationframe比settimeout更平滑；避免display:none导致闪屏；移动端滑动需精准阻止默认行为。
轮播图用 setInterval 自动播放但点击后停不下来？
根本原因是没保存定时器 ID，导致无法 clearInterval。必须把 setInterval 的返回值存为变量，并在用户交互（如点击箭头、悬停）时主动清除。
- 声明一个全局或闭包内的变量，比如
let autoPlayTimer = null - 每次启动轮播前先检查并清除旧的：
if (autoPlayTimer) clearInterval(autoPlayTimer) - 重新赋值：
autoPlayTimer = setInterval(nextSlide, 3000) - 别在函数内重复声明
let autoPlayTimer，否则作用域隔离，清不掉
用 requestAnimationFrame 做平滑轮播动画比 setTimeout 好在哪？
requestAnimationFrame 会按屏幕刷新率执行（通常 60fps），而 setTimeout 受 JS 主线程阻塞影响，容易掉帧、卡顿。尤其当页面有其他重计算或长任务时，setTimeout 的回调可能批量堆积后集中触发。
- 适合做逐帧控制的位移动画（如
transform: translateX()） - 需手动实现缓动逻辑，不能直接替代
setInterval的“每 3 秒切一张”语义 - 实际轮播中常组合使用：用
setInterval控制切换时机，用requestAnimationFrame驱动单次切换的过渡动画
图片切换时出现“闪一下”或“白屏”，大概率是 DOM 更新和 CSS 过渡没对齐
常见于用 display: none 切换图片——浏览器会卸载元素，再显示时重新加载布局、重绘，造成视觉中断。正确做法是保持所有图片始终在 DOM 中，仅靠 opacity、visibility 或 transform 控制显隐。
- 给轮播容器设
overflow: hidden，子项用position: absolute叠放 - 切换时只改当前项的
z-index和opacity，或用transform: translateX(0)/translateX(-100%) - 确保 CSS 中定义了过渡属性：
transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out - 避免在动画中读取
offsetWidth等触发强制同步布局（reflow）
移动端 swipe 滑动失效或响应迟钝？注意事件监听和默认行为冲突
原生 touchstart/touchmove 默认会被浏览器用于滚动，不阻止它，touchmove 就收不到连续事件；但过度阻止又会导致页面无法滚动。关键在精确判断是否属于轮播区域内的水平滑动。
立即学习“Java免费学习笔记（深入）”；
let startX = 0;
let isSwiping = false;
<p>carousel.addEventListener('touchstart', e => {
startX = e.touches[0].clientX;
isSwiping = true;
});</p><p>carousel.addEventListener('touchmove', e => {
if (!isSwiping) return;
const dx = e.touches[0].clientX - startX;
// 只有横向移动明显（比如 > 10px）才接管，避免干扰竖向滚动
if (Math.abs(dx) > 10) {
e.preventDefault(); // 此时才阻止默认行为
}
});- 别一上来就
e.preventDefault()，否则 iOS Safari 会禁用整个页面滚动 - 用
touchend后根据dx决定是切换还是回弹，不要依赖velocity等未标准化字段 - PC 端记得同时处理
mousedown/mousemove，但注意鼠标事件没有preventDefault的滚动影响
轮播图最难的不是切换逻辑，而是让每一次过渡都“不被用户察觉”——DOM 稳定、样式可预测、事件不打架、动画不丢帧。这些细节堆叠起来，才是真实项目里最耗时间的部分。
