jquery - 引导轮播的进度条

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

我有另一种解决方案，设置一个时间间隔，让轮播在 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);
    })
});