轮播图自动播放时监听鼠标悬停需用mouseenter和mouseleave事件控制定时器启停：悬停时clearInterval并置timer为null，离开时检查timer是否为空再重新setInterval，避免重复启动或清除undefined定时器。
轮播图自动播放时怎么监听鼠标悬停事件
轮播图在自动切换时，用户把鼠标移上去却还在翻页，体验很糟。核心是监听 mouseenter 和 mouseleave 事件，手动控制定时器的启停，而不是依赖 CSS 的 animation-play-state（它对 JS 控制的 setTimeout 或 setInterval 无效）。
常见错误是只加了 mouseenter 却漏掉 mouseleave，导致悬停后永远停住；或者在多个轮播图共存时，用全局变量管理定时器，造成互相干扰。
- 给轮播图容器（比如
<div id="carousel">）绑定两个事件 - 用一个变量（如
let timer = null）保存当前定时器 ID，确保可清除 - 悬停时调用
clearInterval(timer)，离开时重新setInterval - 如果轮播逻辑封装在函数里（如
nextSlide()），确保该函数可被重复调用
使用 setInterval 实现轮播时暂停的典型写法
很多手写轮播图用 setInterval 驱动切换，这是最直接可控的方式。注意别在每次 mouseenter 里反复 clearInterval 而不重置变量，否则下次 mouseleave 可能尝试清除已为 null 的定时器，报错 “Cannot clear undefined timer”。
let timer = setInterval(nextSlide, 3000);
document.getElementById('carousel').addEventListener('mouseenter', () => {
clearInterval(timer);
timer = null;
});
document.getElementById('carousel').addEventListener('mouseleave', () => {
if (!timer) {
timer = setInterval(nextSlide, 3000);
}
});
关键点：每次清除后把 timer 设为 null，并在恢复前做 if (!timer) 判断，避免重复启动。
立即学习“前端免费学习笔记（深入）”；
用 requestAnimationFrame 做轮播时怎么暂停
如果轮播用 requestAnimationFrame 实现（更顺滑、节电），暂停逻辑稍不同：cancelAnimationFrame 只能取消下一次帧，不能“暂停”一个持续调用链。必须改用标志位 + 递归调用控制。
- 定义一个布尔变量如
let isPlaying = true - 在动画函数末尾加
if (isPlaying) requestAnimationFrame(animate) -
mouseenter里设isPlaying = false，mouseleave里设isPlaying = true并立即触发一次animate() - 不要在
mouseenter里直接调用cancelAnimationFrame后就结束——那只能取消当前帧，下一轮仍会发起
第三方库（如 Swiper）开启悬停暂停要注意什么
Swiper 默认不开启悬停暂停，得显式配置 pauseOnHover: true，且仅在 autoplay 开启时生效。容易忽略的是：如果用了 disableOnInteraction: true（用户操作后禁用自动播放），它会覆盖 pauseOnHover 行为——悬停也算 interaction，结果变成“一 hover 就永久停”。
- 确认
autoplay是对象形式，不是布尔值：{ delay: 3000, pauseOnHover: true } - 避免同时设
disableOnInteraction: true，除非你真需要交互后彻底停止 - 在 SSR 环境（如 Next.js）中，Swiper 初始化前要确保 DOM 已挂载，否则
pauseOnHover绑定失败
手写轮播图的暂停逻辑看似简单，但定时器生命周期管理、多实例隔离、以及和动画帧机制的配合，才是实际项目里最常出问题的地方。
