$(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.onmouseover(function(){ // ispause = true; // }); // $elem.onmouseout(function(){ // ispause = false; // }) // $elem.on('mouseout', function() { // ispause = false; // }); });