zzsc.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. //Ê×Ò³»ÃµÆÆ¬
  2. $(function() { (function($) {
  3. $.fn.Slide = function(options) {
  4. var defaults = {
  5. item: "slide-item",
  6. nav: "slide-nav",
  7. nowClass: "nownav",
  8. loading: "slide-loading"
  9. },
  10. options = options || {};
  11. options = $.extend(defaults, options);
  12. var cont = $(this),
  13. item = cont.find("." + options.item),
  14. nav = cont.find("." + options.nav),
  15. curr = options.nowClass,
  16. len = item.length,
  17. width = item.width(),
  18. html = "",
  19. index = order = 0,
  20. timer = null,
  21. lw = "-" + width + "px",
  22. rw = width + "px",
  23. newtimer,
  24. ld = cont.find("." + options.loading);
  25. item.each(function(i) {
  26. $(this).css({
  27. left: i === index ? 0 : (i > index ? width + 'px': '-' + width + 'px')
  28. });
  29. html += '<a href="javascript:">' + (i + 1) + '</a>';
  30. });
  31. $("#slide").hover(function() {
  32. $('#next').fadeIn();
  33. $('#prev').fadeIn();
  34. },
  35. function() {
  36. $('#next').fadeOut();
  37. $('#prev').fadeOut();
  38. });
  39. nav.html(html);
  40. var navitem = nav.find("a");
  41. navitem.eq(index).addClass(curr);
  42. function anim(index, dir) {
  43. loading();
  44. if (order === len - 1 && dir === 'next') {
  45. item.eq(order).stop(true, false).animate({
  46. left: lw
  47. });
  48. item.eq(index).css({
  49. left: rw
  50. }).stop(true, false).animate({
  51. left: 0
  52. });
  53. } else if (order === 0 && dir === 'prev') {
  54. item.eq(0).stop(true, false).animate({
  55. left: rw
  56. });
  57. item.eq(index).css({
  58. left: lw
  59. }).stop(true, false).animate({
  60. left: 0
  61. });
  62. } else {
  63. item.eq(order).stop(true, false).animate({
  64. left: index > order ? lw: rw
  65. });
  66. item.eq(index).stop(true, false).css({
  67. left: index > order ? rw: lw
  68. }).animate({
  69. left: 0
  70. });
  71. }
  72. order = index;
  73. navitem.removeClass(curr).eq(index).addClass(curr);
  74. }
  75. function next() {
  76. index = order >= len - 1 ? 0 : order + 1;
  77. _stop();
  78. ld.stop(true, true).animate({
  79. "width": 0
  80. },
  81. 0);
  82. anim(index, 'next');
  83. timer = setInterval(next, 5000);
  84. }
  85. function prev() {
  86. index = order <= 0 ? len - 1 : order - 1;
  87. _stop();
  88. ld.stop(true, true).animate({
  89. "width": 0
  90. },
  91. 0);
  92. anim(index, 'prev');
  93. timer = setInterval(next, 5000);
  94. }
  95. function auto() {
  96. loading();
  97. timer = setInterval(next, 5000);
  98. }
  99. function _stop() {
  100. clearInterval(timer);
  101. }
  102. function loading() {
  103. ld.css({
  104. "height": "0",
  105. "height": "5px",
  106. "position": "absolute",
  107. "left": "0",
  108. "bottom": "0",
  109. "background": "#830303",
  110. "z-index": "10"
  111. });
  112. ld.animate({
  113. "width": "100%"
  114. },
  115. 5000).animate({
  116. "width": 0
  117. },
  118. 0);
  119. }
  120. return this.each(function() {
  121. auto();
  122. navitem.hover(function() {
  123. _stop();
  124. var i = navitem.index(this);
  125. if (/nownav/.test($(this).attr('class'))) {
  126. return false;
  127. }
  128. if (newtimer) clearTimeout(newtimer);
  129. newtimer = setTimeout(function() {
  130. _stop();
  131. ld.stop(true, true).animate({
  132. "width": 0
  133. },
  134. 0);
  135. anim(i, this);
  136. },
  137. 250);
  138. },
  139. auto);
  140. $('#next').on('click', next);
  141. $('#prev').on('click', prev);
  142. });
  143. };
  144. })(jQuery);
  145. $("#slide").Slide();
  146. });