Question

我正在制作一个轮播here，我添加了一个自动滚动功能：

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

不幸的是它一直在滚动...当我将鼠标悬停在项目上时，如何暂停或停止自动滚动以便能够点击“更多”＆＃39;按钮？

Answer 1

在鼠标悬停时设置每个项目的变量，然后在动画和滑动项目之前使用此变量检查navigate方法内部。如果鼠标在项目上，那么只需从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;

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

工作演示 - http://jsfiddle.net/S83Tp/2/

Answer 2

您需要添加mouseover事件监听器。

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

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

接下来，添加一个事件监听器来处理悬停：

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

当然，您需要确定哪个元素需要被遗忘，因为它很可能不是window对象。

请务必在功能顶部拨打clearInterval(timer)。

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

2 个答案: