$(function() {
var time = 4; //进度条时间,以秒为单位,越小越快
var $progressBar, $bar, $elem, isPause, tick, percentTime;
$('#owl-demo').owlCarousel({
navigation: true,
navigationText: ['', ''],
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
afterInit: progressBar,
afterMove: moved,
startDragging: pauseOnDragging
});
function progressBar(elem) {
$elem = elem;
buildProgressBar();
start();
}
function buildProgressBar() {
$progressBar = $('
', {
id: 'progressBar'
});
$bar = $('
', {
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;
});
});