如何实现鼠标悬停轮播父容器时暂停自动切换并适配屏幕间隔

首先提前感谢各位提供的帮助。

我编写了如下简单脚本，用于触发轮播右箭头点击事件，实现切换到下一张幻灯片的效果：

<script>
        // Simulate click function
        function clickButton() {
            document.querySelector('.slick-next').click();
        }

        // Simulate a click every second
        setInterval(clickButton, 4000);
</script>

当前遇到的问题是：我需要在鼠标悬停在类名为.product-carousel的轮播容器上时，阻止轮播自动前进。我的轮播容器类名为.product-carousel，右箭头类名为.slick-next。

通俗来说我需要实现如下逻辑：

If the mouse is over the slider { do nothing } else { click on the right arrow every 4 seconds. }

除此之外还有更复杂的适配需求：大屏幕下轮播会展示4张图片，用户需要更多时间浏览全部内容，因此除了鼠标悬停暂停的逻辑外，还需要根据屏幕分辨率调整自动切换间隔。

最终我需要实现的完整逻辑如下：

If the mouse (or finger) is over the slider { do nothing } else {
  if resolution is smaller than or equal to 1024px {
    click on the right arrow every 4 seconds.
  }
  else {
    click on the right arrow every 7 seconds.
  }
}

恳请各位提供可行的实现方案，非常感谢。

你可以通过状态标记悬停状态、动态管理定时器的方式实现需求，完整可运行代码如下：

<script>
// 存储定时器实例、悬停状态标记
let carouselTimer = null;
let isCarouselHover = false;
const carouselContainer = document.querySelector('.product-carousel');
const nextArrow = document.querySelector('.slick-next');

// 根据屏幕宽度返回对应的切换间隔
function getSwitchInterval() {
  return window.innerWidth <= 1024 ? 4000 : 7000;
}

// 触发下一张切换的逻辑
function triggerNextSlide() {
  if (!isCarouselHover && nextArrow) {
    nextArrow.click();
  }
}

// 启动自动轮播
function initAutoSwitch() {
  // 先清理已有定时器，避免重复实例
  if (carouselTimer) clearInterval(carouselTimer);
  carouselTimer = setInterval(triggerNextSlide, getSwitchInterval());
}

// 暂停自动轮播
function stopAutoSwitch() {
  if (carouselTimer) {
    clearInterval(carouselTimer);
    carouselTimer = null;
  }
}

// 绑定交互事件
if (carouselContainer) {
  // PC端鼠标悬停暂停
  carouselContainer.addEventListener('mouseenter', () => {
    isCarouselHover = true;
    stopAutoSwitch();
  });
  // PC端鼠标离开恢复
  carouselContainer.addEventListener('mouseleave', () => {
    isCarouselHover = false;
    initAutoSwitch();
  });
  // 移动端触摸按住暂停
  carouselContainer.addEventListener('touchstart', () => {
    isCarouselHover = true;
    stopAutoSwitch();
  });
  // 移动端触摸离开恢复
  carouselContainer.addEventListener('touchend', () => {
    isCarouselHover = false;
    initAutoSwitch();
  });
}

// 监听窗口尺寸变化，自动适配切换间隔
window.addEventListener('resize', () => {
  if (!isCarouselHover) initAutoSwitch();
});

// 页面加载完成后启动自动轮播
window.addEventListener('load', initAutoSwitch);
</script>

方案说明 #

• 所有元素操作前都做了存在性校验，不会出现无对应元素时的控制台报错
• 每次启动定时器前都会清理旧实例，不会出现多定时器并行导致切换速度异常的问题
• 窗口尺寸变化时会自动应用新的间隔规则，无需刷新页面
• 同时兼容PC端鼠标悬停、移动端触摸暂停的交互场景，完全匹配需求逻辑

内容的提问来源于stack exchange，提问作者Nuno Miguel