jQuery slider help

Question

Я сделал слайдер, но я не так уж хорош с jQuery. Я хотел бы приостановить слайдер на hover, а также хотел бы предотвратить использование кнопок при анимации. Может ли кто-нибудь помочь мне в этом?

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 O в #scrolldiv_container элемента. Таким образом, он не будет прокручиваться, когда вы наводите левую и правую кнопки. Это не то, о чем вы просили, но я был бы доволен конечным результатом.

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

Читайте о событиях здесь: https://api.jquery.com/mouseover/

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