需要jQuery滑塊幫助

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

更新：上箭頭固定的錯誤。

Demo

這是你想要的嗎？當播放動畫時我只隱藏了按鈕，並且當檢測到懸停時，它們再次顯示。如果您希望按鈕可以被禁用而不是隱藏。

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 2

添加一個布爾值，看看用戶將鼠標懸停在#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); 

添加事件爲mouseenter和mouseleave的#scrolldiv_container元素。這樣，當您懸停左右按鈕時，它不會滾動。這不是你要求的確切的事情，但我會對最終結果感到滿意。

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

閱讀有關此事件：https://api.jquery.com/mouseover/

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

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 
    });