Javascript 悬停时停止或暂停自动滚动功能

我正在处理旋转木马，并添加了自动滚动功能：

// auto scroll
setInterval(function() {
aux.navigate( 1, $el, $wrapper, settings, cache );
},2000);

function autoScroll() {
  var timer = '';
  clearInterval(timer);
  timer = setInterval(function() {
  aux.navigate( 1, $el, $wrapper, settings, cache );
  },2000);
}

---

不幸的是，它一直在滚动。。。如何在将鼠标悬停在项目上方时暂停或停止自动滚动，以便能够单击“更多”按钮？

在每个项目的鼠标上方设置一个变量，然后在设置项目动画和滑动项目之前，使用此变量检查内部

导航

方法。如果鼠标位于项目上，则只需从

navigate

方法返回，无需执行任何操作

var mouseOnItem = false;

$('.ca-item').hover(function(){
    mouseOnItem = true;
}, function(){
    mouseOnItem = false;
});

 var aux = {
    // navigates left / right
    navigate: function(dir, $el, $wrapper, opts, cache) {
        if(mouseOnItem)
            return;

        ...
        ...
    }
    ...
    ...  
  } 

---

工作演示-

您需要添加一个

鼠标盖

事件侦听器

首先，将自动滚动包装在一个函数中：

// auto scroll
setInterval(function() {
aux.navigate( 1, $el, $wrapper, settings, cache );
},2000);

function autoScroll() {
  var timer = '';
  clearInterval(timer);
  timer = setInterval(function() {
  aux.navigate( 1, $el, $wrapper, settings, cache );
  },2000);
}

接下来，添加事件侦听器以处理悬停：

window.addEventListener('mouseover', autoScroll, false);

当然，您需要确定哪个元素需要鼠标覆盖，因为它很可能不是

窗口

对象

确保调用函数顶部的

clearInterval（timer）