Jquery 用于引导转盘的Progressbar

我用的是Bootstrap3旋转木马。我不想要控件或指示器，但我想要一个进度条。 当鼠标悬停时，进度条也将暂停。 下面是我的代码：

$(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>

$（函数（）{
$（'.carousel'）。carousel({
间隔时间：2000年，
暂停：“悬停”
});        
var计数器=0；
setInterval（函数（）{
计数器=（计数器+1）%100；
$（“.progressbar”）.css（“宽度”，计数器+“%”）；
}, 20);
});

我想要的是：

---

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

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

---

你觉得怎么样？

我有另一个解决方案，设置一个时间间隔，并在旋转木马达到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);
    })
});

---

好问题。不过，欢迎使用带有最小标记的或，例如旋转木马和进度条。还添加了小提琴。这是真实的方式。在这种情况下，当鼠标悬停图像时，progressbar的动画暂停，当鼠标在图像上模糊时，progressbar动画恢复。谢谢