引導傳送帶的進度條

Question

我使用引導傳送帶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); 
    }) 
});