jquery - 如何在鼠标拖动操作时重置 jQuery 进度条？

Question

我已经在我的网站上安装了 Slick 轮播以及我找到的一些用于制作漂亮进度条的代码。但是，尽管单击“上一个”和“下一个”按钮时进度条会重置，但拖动 slider 时进度条不会重置。

我尝试过 jQuery 事件，但找不到适合单击和拖动的事件。

我的网站是http://bp112.betapark.co.uk/这是 jQuery 代码:

<script>
$(document).ready(function() {
  var time = 2;
  var $bar,
    $slick,
    isPause,
    tick,
    percentTime;

  $slick = $('.slider');
  $slick.slick({
    draggable: false,
    arrows: true,
    speed: 1200,
    adaptiveHeight: false
  });

  $bar = $('.slider-progress .progress');

  function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPause = false;
    tick = setInterval(interval, 30);
  }

  function interval() {
    if (isPause === false) {
      percentTime += 1 / (time + 0.1);
      $bar.css({
        width: percentTime + "%"
      });
      if (percentTime >= 100) {
        $slick.slick('slickNext');
        startProgressbar();
      }
    }
  }

  function resetProgressbar() {
    $bar.css({
      width: 0 + '%'
    });
    clearTimeout(tick);
  }

  startProgressbar();

  $('.slick-next, .slick-prev').click(function() {
    startProgressbar();
  });

});
</script>

Answer 1

您可以使用灵活的事件。例如 beforeChange 或 afterChange 并在那里放置您的操作，而不是单击:http://kenwheeler.github.io/slick/

$slick.on('beforeChange', function(event, slick, currentSlide, nextSlide){
  startProgressbar();
});

$(document).on('ready', function() {
      var time = 2;
      var $bar,
        $slick,
        isPause,
        tick,
        percentTime;

      $slick = $('.regular');
      $slick.slick({
        draggable: true,
        arrows: true,
        speed: 1200,
        adaptiveHeight: false
      });

      $bar = $('.slider-progress .progress');

      function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        isPause = false;
        tick = setInterval(interval, 30);
      }

      function interval() {
        if (isPause === false) {
          percentTime += 1 / (time + 0.1);
          $bar.css({
            width: percentTime + "%"
          });
          if (percentTime >= 100) {
            $slick.slick('slickNext');
            startProgressbar();
          }
        }
      }

      function resetProgressbar() {
        $bar.css({
          width: 0 + '%'
        });
        clearTimeout(tick);
      }

      startProgressbar();

      $slick.on('beforeChange', function(event, slick, currentSlide, nextSlide){
        startProgressbar();
      });
      
});

.slider-progress {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  bottom: 0;
}
.slider-progress .progress {
  width: 0%;
  height: 10px;
  background: #E74C3C;
}



/* SLICK BASE CSS */
.slick-prev {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
content:"prev";
}

.slick-next {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
}

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6">
    </div>
  </section>
  <div class="slider-progress">        <div class="progress"></div>    </div>

编辑 1

要在翻转时停止，请在光滑的 slider 上使用 pauseOnHover: true (文档规则: http://kenwheeler.github.io/slick/ ! ;) )并使用非常有用的变量 isPause 来停止您的操作栏:

$slick.on("mouseenter", function(){
   isPause = true;
}).on("mouseleave", function(){
   isPause = false;
})

$(document).on('ready', function() {
      var time = 2;
      var $bar,
        $slick,
        isPause,
        tick,
        percentTime;

      $slick = $('.regular');
      $slick.slick({
        draggable: true,
        arrows: true,
        speed: 1200,
        adaptiveHeight: false,
        pauseOnHover: true /* add this option */
      });

      $bar = $('.slider-progress .progress');

      function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        isPause = false;
        tick = setInterval(interval, 30);
      }

      function interval() {
        if (isPause === false) {
          percentTime += 1 / (time + 0.1);
          $bar.css({
            width: percentTime + "%"
          });
          if (percentTime >= 100) {
            $slick.slick('slickNext');
            startProgressbar();
          }
        }
      }

      function resetProgressbar() {
        $bar.css({
          width: 0 + '%'
        });
        clearTimeout(tick);
      }

      startProgressbar();

      $slick.on('beforeChange', function(event, slick, currentSlide, nextSlide){
        startProgressbar();
      });

      $slick.on("mouseenter", function(){
        isPause = true;
      }).on("mouseleave", function(){
        isPause = false;
      })
      
});

.slider-progress {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  bottom: 0;
}
.slider-progress .progress {
  width: 0%;
  height: 10px;
  background: #E74C3C;
}



/* SLICK BASE CSS */
.slick-prev {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
content:"prev";
}

.slick-next {
background: #DDD;
border: none;
border-radius: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
padding: 0.25em 0.5em;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
z-index: 40;
}

html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6">
    </div>
  </section>
  <div class="slider-progress">        <div class="progress"></div>    </div>