progress.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  1. $(function() {
  2. var time = 4; //进度条时间,以秒为单位,越小越快
  3. var $progressBar, $progressBar1, $progressBar2, $bar, $bar1, $bar2, $elem, isPause, tick, percentTime, $elem1, isPause1, tick1, percentTime1, $elem2, isPause2, tick2, percentTime2;
  4. $('.owl-carousel').owlCarousel({
  5. navigation: true,
  6. navigationText: ['', ''],
  7. slideSpeed: 500,
  8. paginationSpeed: 500,
  9. singleItem: true,
  10. afterInit: progressBar,
  11. afterMove: moved,
  12. startDragging: pauseOnDragging
  13. });
  14. $('.owl-carousel1').owlCarousel({
  15. navigation: true,
  16. navigationText: ['', ''],
  17. slideSpeed: 500,
  18. paginationSpeed: 500,
  19. singleItem: true,
  20. afterInit: progressBar1,
  21. afterMove: moved1,
  22. startDragging: pauseOnDragging1
  23. });
  24. $('.owl-carousel2').owlCarousel({
  25. navigation: true,
  26. navigationText: ['', ''],
  27. slideSpeed: 500,
  28. paginationSpeed: 500,
  29. singleItem: true,
  30. afterInit: progressBar2,
  31. afterMove: moved2,
  32. startDragging: pauseOnDragging2
  33. });
  34. function progressBar(elem) {
  35. $elem = elem;
  36. buildProgressBar();
  37. start();
  38. }
  39. function progressBar1(elem1) {
  40. $elem1 = elem1;
  41. buildProgressBar1();
  42. start1();
  43. }
  44. function progressBar2(elem2) {
  45. $elem2 = elem2;
  46. buildProgressBar2();
  47. start2();
  48. }
  49. function buildProgressBar() {
  50. $progressBar = $('<div>', {
  51. id: 'progressBar'
  52. });
  53. $bar = $('<div>', {
  54. id: 'bar'
  55. });
  56. $progressBar.append($bar).insertAfter($elem.children().eq(0));
  57. }
  58. function buildProgressBar1() {
  59. $progressBar1 = $('<div>', {
  60. id: 'progressBar1'
  61. });
  62. $bar1 = $('<div>', {
  63. id: 'bar1'
  64. });
  65. $progressBar1.append($bar1).insertAfter($elem1.children().eq(0));
  66. }
  67. function buildProgressBar2() {
  68. $progressBar2 = $('<div>', {
  69. id: 'progressBar2'
  70. });
  71. $bar2 = $('<div>', {
  72. id: 'bar2'
  73. });
  74. $progressBar2.append($bar2).insertAfter($elem2.children().eq(0));
  75. }
  76. function start() {
  77. percentTime = 0;
  78. isPause = false;
  79. tick = setInterval(interval, 10);
  80. }
  81. function start1() {
  82. percentTime1 = 0;
  83. isPause1 = false;
  84. tick1 = setInterval(interval1, 10);
  85. }
  86. function start2() {
  87. percentTime2 = 0;
  88. isPause2 = false;
  89. tick2 = setInterval(interval2, 10);
  90. }
  91. function interval() {
  92. if(isPause === false) {
  93. percentTime += 1 / time;
  94. $bar.css({
  95. width: percentTime + '%'
  96. });
  97. if(percentTime >= 100) {
  98. $elem.trigger('owl.next')
  99. }
  100. }
  101. }
  102. function interval1() {
  103. if(isPause1 === false) {
  104. percentTime1 += 1 / time;
  105. $bar1.css({
  106. width: percentTime1 + '%'
  107. });
  108. if(percentTime1 >= 100) {
  109. $elem1.trigger('owl.next')
  110. }
  111. }
  112. }
  113. function interval2() {
  114. if(isPause2 === false) {
  115. percentTime2 += 1 / time;
  116. $bar2.css({
  117. width: percentTime2 + '%'
  118. });
  119. if(percentTime2 >= 100) {
  120. $elem2.trigger('owl.next')
  121. }
  122. }
  123. }
  124. function pauseOnDragging() {
  125. isPause = true;
  126. }
  127. function pauseOnDragging1() {
  128. isPause1 = true;
  129. }
  130. function pauseOnDragging2() {
  131. isPause2 = true;
  132. }
  133. function moved() {
  134. clearTimeout(tick);
  135. start();
  136. }
  137. function moved1() {
  138. clearTimeout(tick1);
  139. start1();
  140. }
  141. function moved2() {
  142. clearTimeout(tick2);
  143. start2();
  144. }
  145. $elem.on('mouseover', function() {
  146. isPause = true;
  147. })
  148. $elem.on('mouseout', function() {
  149. isPause = false;
  150. });
  151. $elem1.on('mouseover', function() {
  152. isPause1 = true;
  153. })
  154. $elem1.on('mouseout', function() {
  155. isPause1 = false;
  156. });
  157. $elem2.on('mouseover', function() {
  158. isPause2 = true;
  159. })
  160. $elem2.on('mouseout', function() {
  161. isPause2 = false;
  162. });
  163. });