$(function(){
var time = 7; //进度条时间,以秒为单位,越小越快
var $progressBar, $bar, $elem, isPause, tick, percentTime;
$('#owl-demo').owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
afterInit: progressBar,
afterMove: moved,
startDragging: pauseOnDragging
});
function progressBar(elem){
$elem = elem;
buildProgressBar();
start();
}
function buildProgressBar(){
$progressBar = $('<div>',{
id:'progressBar'
});
$bar = $('<div>',{
id:'bar'
});
$progressBar.append($bar).insertAfter($elem.children().eq(0));
}
function start(){
percentTime = 0;
isPause = false;
tick = setInterval(interval, 10);
}
function interval(){
if(isPause === false){
percentTime += 1 / time;
$bar.css({
width: percentTime+'%'
});
if(percentTime >= 100){
$elem.trigger('owl.next')
}
}
}
function pauseOnDragging(){
isPause = true;
}
function moved(){
clearTimeout(tick);
start();
}
$elem.on('mouseover',function(){
isPause = true;
})
$elem.on('mouseout',function(){
isPause = false;
});
});
<div id="owl-demo" class="owl-carousel">
<a class="item"><img src="img/fullimage1.jpg" alt=""></a>
<a class="item"><img src="img/fullimage2.jpg" alt=""></a>
<a class="item"><img src="img/fullimage3.jpg" alt=""></a>
<a class="item"><img src="img/fullimage4.jpg" alt=""></a>
<a class="item"><img src="img/fullimage5.jpg" alt=""></a>
</div>
#owl-demo {
width: 900px;
margin-left: auto;
margin-right: auto;
}
#owl-demo .item {
display: block;
}
#owl-demo img {
display: block;
width: 100%;
border: 0 none;
}
#bar {
width: 0%;
max-width: 100%;
height: 4px;
background: #7fc242;
overflow: hidden;
}
#progressBar {
width: 100%;
background: #ededed;
}