引导轮播的进度条

Question

我正在使用 Bootstrap 3 轮播。我不想有控件或指示器，但我想要一个进度条。 当悬停时，进度条也会暂停。 以下是我的代码：

$(function() {   

   $('.carousel').carousel({
      interval: 2000,
       pause: 'hover'
   });        

   var counter =0;   
    setInterval(function() {
      counter = (counter + 1) % 100;
      $(".progressbar").css("width", counter + "%");
   }, 20);

});


<div id="mycarousel" class="carousel slide">
    <!-- Carousel Indicators -->
    <ol class="carousel-indicators">
        <li class="active" data-target="#mycarousel" data-slide-to="0"></li>
        <li data-target="#mycarousel" data-slide-to="1"></li>
        <li data-target="#mycarousel" data-slide-to="2"></li>
    </ol>  

    <div class="carousel-inner">
        <div class="item active"><img src="http://flickholdr.com/300/100" /></div>
        <div class="item"><img src="http://flickholdr.com/300/100" /></div>
        <div class="item"><img src="http://flickholdr.com/300/100" /></div>
    </div>

    <div class="progressbar"></div>
</div>

我希望它是什么： http://jsfiddle.net/cfV6c/

Answer 1

使用 jsfiddle 中的示例，我得到了一个可行的解决方案，但没有在悬停时暂停进度条。远非完美，但我希望它有所帮助：

$(function() {
  var counter = 0;
  var progressBar;

  function progressBarRun() {
    progressBar = setInterval(function() {
      counter += 1;
      if (counter > 100) clearInterval(progressBar);
      $(".progressbar").css("width", counter + "%");
    }, 20);
  }
  progressBarRun();

  $('#mycarousel').on('slid.bs.carousel', function () {
    counter = 0;
    clearInterval(progressBar);
    progressBarRun();
  });
});

你怎么看？

Answer 2

我有另一种解决方案，设置一个间隔并让轮播在 100% 时滑动

$(function(){
var percent = 0, bar = $('.pg-carousel'), crsl = $('.carou-java');
function progressBarCarousel() {
  bar.css({width:percent+'%'});
  percent = percent +1;
  if (percent>100) {
    crsl.carousel('next');
    percent=100;
  }
}
var barInterval = setInterval(progressBarCarousel, 100);
crsl.carousel({
    interval: false,
    pause: false
}).on('slid.bs.carousel', function () {
    percent=0;
});
crsl.hover(
    function(){
        clearInterval(barInterval);
    },
    function(){
        barInterval = setInterval(progressBarCarousel, 100);
    })
});