滚动公告组件的鼠标交互

问题

滚动公告组件如何在鼠标滑入时停止播放，离开时继续执行滑入前的剩余等待时间后再播放？

解答

滚动公告通常使用 setInterval 实现定时切换。要实现鼠标交互控制，需要监听 mouseover 和 mouseout 事件。

实现思路

当 mouseover 触发时：

• 清除当前的定时器
• 记录下一次切换的剩余等待时间

当 mouseout 触发时：

• 等待剩余时间后立即切换
• 重新开启定时轮播

代码示例

let timer = null;
let remainingTime = 0;
let lastTime = Date.now();
const interval = 3000; // 轮播间隔

function startCarousel() {
  timer = setInterval(() => {
    switchToNext();
    lastTime = Date.now();
  }, interval);
}

carousel.addEventListener('mouseover', () => {
  if (timer) {
    clearInterval(timer);
    const elapsed = Date.now() - lastTime;
    remainingTime = interval - elapsed;
  }
});

carousel.addEventListener('mouseout', () => {
  setTimeout(() => {
    switchToNext();
    lastTime = Date.now();
    startCarousel();
  }, remainingTime);
});

注意事项

需要处理鼠标悬停期间手动切换的情况。如果用户在悬停时点击切换按钮，应重置剩余时间计算。

关键点

• 使用 mouseover 和 mouseout 事件控制轮播的暂停和恢复
• 记录定时器触发的时间戳，计算鼠标滑入时的剩余等待时间
• 鼠标离开后先等待剩余时间，再恢复正常的定时轮播
• 需要处理悬停期间手动切换的边界情况