Question

我制作了一个滑块，但我对jQuery并不是那么棒。我想在悬停时暂停滑块，并且还希望阻止在播放动画时使用按钮。有人可以帮我吗？

var jq = $.noConflict();

setInterval(function() {
      var leftPos = jq('#browser').scrollLeft();
      if(leftPos == 5400){
      jq('#browser').animate({scrollLeft: 0}, 800);
      }else{
      jq('#browser').animate({scrollLeft: leftPos + 900}, 800);      
      }
},  3000);

      jq('.rightarrow').click(function() {
      var leftPos = jq('#browser').scrollLeft();
      if(leftPos == 5400){
      jq('#browser').animate({scrollLeft: 0}, 800);
      }else{
      jq('#browser').animate({scrollLeft: leftPos + 900}, 800);      
      }
   });

      jq('.leftarrow').click(function() {
      var leftPos = jq('#browser').scrollLeft();
      if(leftPos == 0){
      jq('#browser').animate({scrollLeft: 5400}, 800);
      }else{
      jq('#browser').animate({scrollLeft: leftPos - 900}, 800);
     }
   });

这是我的小提琴：

https://jsfiddle.net/apielotje/2kyaJ/958/

Answer 1

添加布尔值以查看用户是否悬停#scrolldiv_container元素。

var isHovering = false;
setInterval(function() {
    if(!isHovering) {
        var leftPos = jq('#browser').scrollLeft();
        if(leftPos == 5400){
            jq('#browser').animate({scrollLeft: 0}, 800);
        } else{
            jq('#browser').animate({scrollLeft: leftPos + 900}, 800);      
        }
    }
},  3000);

为#scrolldiv_container元素添加mouseenter和mouseleave的事件。这样，当您将鼠标悬停在左右按钮时，它不会滚动。这不是你要求的确切事情，但我对最终结果感到满意。

jq( "#scrolldiv_container" ).mouseenter(function() {
    isHovering = true;
    }).mouseleave(function() {
    isHovering = false;
});

在此处阅读有关活动的信息：https://api.jquery.com/mouseover/

小提琴https://jsfiddle.net/j5sqjfvk/

Answer 2

已更新：已修复箭头错误。

Romain Guy's

这是你想要的吗？我只是在播放动画时隐藏按钮，当检测到悬停时，它们会再次显示。如果你想要按钮可以被禁用而不是隐藏。

var jq = $.noConflict();

var siId = -1,
    si = function () {
        //hidding buttons
        siId = setInterval(function () {
            var leftPos = jq('#browser').scrollLeft();
            if (leftPos == 5400) {
                jq('#browser').animate({
                    scrollLeft: 0
                }, 800);
            } else {
                jq('#browser').animate({
                    scrollLeft: leftPos + 900
                }, 800);
            }
        }, 3000);
    }

//hidding arrows initially
jq('.rightarrow, .leftarrow').hide();

jq('#scrolldiv_container').mouseenter(function(){
    jq('.rightarrow, .leftarrow').show('fast');
    clearInterval(siId);
})
jq('#scrolldiv_container').mouseleave(function(){
    jq('.rightarrow, .leftarrow').hide('fast');
        si();
});

jq('.rightarrow').click(function () {
    var leftPos = jq('#browser').scrollLeft();
    if (leftPos == 5400) {
        jq('#browser').animate({
            scrollLeft: 0
        }, 800);
    } else {
        jq('#browser').animate({
            scrollLeft: leftPos + 900
        }, 800);
    }
});

jq('.leftarrow').click(function () {
    var leftPos = jq('#browser').scrollLeft();
    if (leftPos == 0) {
        jq('#browser').animate({
            scrollLeft: 5400
        }, 800);
    } else {
        jq('#browser').animate({
            scrollLeft: leftPos - 900
        }, 800);
    }
});

//starting slider here
si();

Answer 3

只需创建一个功能并在悬停时管理您的间隔。这将在悬停时暂停滑块。您还可以控制悬停部分中按钮的淡入淡出。

    var jq = $.noConflict();
     function test() {  //name your function
      var leftPos = jq('#browser').scrollLeft();
      if(leftPos == 5400){
      jq('#browser').animate({scrollLeft: 0}, 800);
      }else{
      jq('#browser').animate({scrollLeft: leftPos + 900}, 800);      
      }
     }

     var interval = setInterval(test, 3000); //set default interval

      jq('.rightarrow').click(function() {
      var leftPos = jq('#browser').scrollLeft();
      if(leftPos == 5400){
      jq('#browser').animate({scrollLeft: 0}, 800);
      }else{
      jq('#browser').animate({scrollLeft: leftPos + 900}, 800);      
      }
   });

      jq('.leftarrow').click(function() {
      var leftPos = jq('#browser').scrollLeft();
      if(leftPos == 0){
      jq('#browser').animate({scrollLeft: 5400}, 800);
      }else{
      jq('#browser').animate({scrollLeft: leftPos - 900}, 800);
     }
   });
   jq('#scrolldiv_container').hover(function(){
    clearInterval(interval); //destroy interval on hover
     },         
    function(){
     interval = setInterval(test, 3000); // create default interval on hover out
    });

需要jQuery滑块帮助

3 个答案: