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