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