javascript - 需要 jQuery slider 帮助

Question

我制作了一个 slider ，但我不太擅长 jQuery。我想在悬停时暂停 slider ，并且还想防止在播放动画时使用按钮。有人可以帮我解决这个问题吗？

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

这是我的 fiddle :

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