jiliangzhifujsV2/js/owl/progress.js

$(function() {
	var time = 4; //进度条时间，以秒为单位，越小越快
	var $progressBar, $progressBar1, $progressBar2, $bar, $bar1, $bar2, $elem, isPause, tick, percentTime, $elem1, isPause1, tick1, percentTime1, $elem2, isPause2, tick2, percentTime2;
	$('.owl-carousel').owlCarousel({
		navigation: true,
		navigationText: ['', ''],
		slideSpeed: 500,
		paginationSpeed: 500,
		singleItem: true,
		afterInit: progressBar,
		afterMove: moved,
		startDragging: pauseOnDragging
	});
	$('.owl-carousel1').owlCarousel({
		navigation: true,
		navigationText: ['', ''],
		slideSpeed: 500,
		paginationSpeed: 500,
		singleItem: true,
		afterInit: progressBar1,
		afterMove: moved1,
		startDragging: pauseOnDragging1
	});
	$('.owl-carousel2').owlCarousel({
		navigation: true,
		navigationText: ['', ''],
		slideSpeed: 500,
		paginationSpeed: 500,
		singleItem: true,
		afterInit: progressBar2,
		afterMove: moved2,
		startDragging: pauseOnDragging2
	});

	function progressBar(elem) {
		$elem = elem;
		buildProgressBar();
		start();
	}
	function progressBar1(elem1) {
		$elem1 = elem1;
		buildProgressBar1();
		start1();
	}
	function progressBar2(elem2) {
		$elem2 = elem2;
		buildProgressBar2();
		start2();
	}

	function buildProgressBar() {
		$progressBar = $('<div>', {
			id: 'progressBar'
		});
		$bar = $('<div>', {
			id: 'bar'
		});
		$progressBar.append($bar).insertAfter($elem.children().eq(0));
	}
	function buildProgressBar1() {
		$progressBar1 = $('<div>', {
			id: 'progressBar1'
		});
		$bar1 = $('<div>', {
			id: 'bar1'
		});
		$progressBar1.append($bar1).insertAfter($elem1.children().eq(0));
	}
	function buildProgressBar2() {
		$progressBar2 = $('<div>', {
			id: 'progressBar2'
		});
		$bar2 = $('<div>', {
			id: 'bar2'
		});
		$progressBar2.append($bar2).insertAfter($elem2.children().eq(0));
	}

	function start() {
		percentTime = 0;
		isPause = false;
		tick = setInterval(interval, 10);
	}
	function start1() {
		percentTime1 = 0;
		isPause1 = false;
		tick1 = setInterval(interval1, 10);
	}
	function start2() {
		percentTime2 = 0;
		isPause2 = false;
		tick2 = setInterval(interval2, 10);
	}

	function interval() {
		if(isPause === false) {
			percentTime += 1 / time;
			$bar.css({
				width: percentTime + '%'
			});
			if(percentTime >= 100) {
				$elem.trigger('owl.next')
			}
		}
	}
	function interval1() {
		if(isPause1 === false) {
			percentTime1 += 1 / time;
			$bar1.css({
				width: percentTime1 + '%'
			});
			if(percentTime1 >= 100) {
				$elem1.trigger('owl.next')
			}
		}
	}
	function interval2() {
		if(isPause2 === false) {
			percentTime2 += 1 / time;
			$bar2.css({
				width: percentTime2 + '%'
			});
			if(percentTime2 >= 100) {
				$elem2.trigger('owl.next')
			}
		}
	}

	function pauseOnDragging() {
		isPause = true;
	}
	function pauseOnDragging1() {
		isPause1 = true;
	}
	function pauseOnDragging2() {
		isPause2 = true;
	}

	function moved() {
		clearTimeout(tick);
		start();
	}
	function moved1() {
		clearTimeout(tick1);
		start1();
	}
	function moved2() {
		clearTimeout(tick2);
		start2();
	}
	$elem.on('mouseover', function() {
		isPause = true;
	})
	$elem.on('mouseout', function() {
		isPause = false;
	});
	$elem1.on('mouseover', function() {
		isPause1 = true;
	})
	$elem1.on('mouseout', function() {
		isPause1 = false;
	});
	$elem2.on('mouseover', function() {
		isPause2 = true;
	})
	$elem2.on('mouseout', function() {
		isPause2 = false;
	});
});