jQuery插件animateSlide制作多点滑动幻灯片

本文给大家分享的是使用jQuery插件animateSlide制作多点滑动幻灯片特效，十分的炫酷，有需要的小伙伴可以参考下

首页banner的酷炫效果多来自全屏大图的幻灯片动画，下面提供一种完美兼容的jquery动画特效：全新jquery多点滑动幻灯片——全屏动画animateSlide(代码完全原创)。

直接上代码，把html、css和jquery代码copy到页面上即可呈现完美画面。

html代码如下：

1. <div class="animateSlide"> 
2. <div class="animateSlideImgWrap"> 
3. <div class="animateSlideImgBox present"> 
4. <p class="text1">亲，这是第一行标题</p> 
5. <p class="text2">AAAAAAAAAAAAAAAAAAAAA</p> 
6. <!--<img class="img" alt="" src="img/1.png" />--> 
7. <div class="img" style="width: 500px; height: 390px; background: #ffaeae; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片，目前临时用div代替图片 --> 
8. </div> 
9. <div class="animateSlideImgBox"> 
10. <p class="text1">亲，这是一行宣传语</p> 
11. <p class="text2">BBBBBBBBBBBBBBBBBBBBB</p> 
12. <!--<img class="img" alt="" src="img/2.png" />--> 
13. <div class="img" style="width: 500px; height: 390px; background: #aeffb2; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片，目前临时用div代替图片 --> 
14. </div> 
15. <div class="animateSlideImgBox"> 
16. <p class="text1">亲，这是一个奇迹啊</p> 
17. <p class="text2">CCCCCCCCCCCCCCCCCCCCC</p> 
18. <!--<img class="img" alt="" src="img/3.png" />--> 
19. <div class="img" style="width: 500px; height: 390px; background: #aebdff; opacity: 0.6;"></div><!-- 实际项目中用上面注释的半透明png图片，目前临时用div代替图片 --> 
20. </div> 
21. </div> 
22. <div class="animateSlideBtnL"><</div> 
23. <div class="animateSlideBtnR"><</div> 
24. </div> 

css代码如下：

1. .animateSlide {width: 100%; height: 390px; position: relative; background: #f5f5f5;} 
2. .animateSlideImgWrap {width: 100%; height: 390px; position: absolute; z-index: 1; overflow: hidden;} 
3. .animateSlideImgWrap .present {display: block;} 
4. .animateSlideImgBox {width: 100%; height: 390px; position: absolute; z-index: 1; display: none;} 
5. .animateSlideImgBox .text1 {font-family: Microsoft YaHei; font-size: 36px; line-height: 1.2em; color: #384cd0; position: absolute; top: 120px; z-index: 3; white-space: nowrap;} 
6. .animateSlideImgBox .text2 {font-family: Microsoft YaHei; font-size: 26px; line-height: 1.2em; color: orange; position: absolute; top: 200px; z-index: 3; white-space: nowrap;} 
7. .animateSlideImgBox .img {position: absolute; left: 470px; top: 0; z-index: 2;} 
8. .animateSlideBtnL, 
9. .animateSlideBtnR { 
10. width: 30px; height: 60px; line-height: 60px; font-size: 20px; font-weight: 700; text-align: center; background: #ddd; 
11. position: absolute; left: 30px; top: 150px; z-index: 6; cursor: pointer; display: none; 
12. } 
13. .animateSlideBtnR {left: auto; right: 20px;} 

jquery代码如下：

1. (function($) { 
2. $.fn.animateSlide = function(options) { 
3. var defaults = { 
4. btnL: ".animateSlideBtnL", 
5. btnR: ".animateSlideBtnR", 
6. imgBox: ".animateSlideImgBox", 
7. animateTime: 500, 
8. delayTime: 5000, 
9. density: 1 
10. }; 
11. var opts = $.extend(defaults, options); 
12. var widthWin = $(window).width(); 
13. $(window).resize(function() { 
14. widthWin = $(window).width(); 
15. }); 
16. // 
17. this.on("mouseenter", function() { 
18. $(this).find(".animateSlideBtnL, .animateSlideBtnR").stop().fadeIn(400); 
19. }).on("mouseleave", function() { 
20. $(this).find(".animateSlideBtnL, .animateSlideBtnR").stop().fadeOut(400); 
21. }); 
22. return this.each(function() { 
23. var _this = $(this); 
24. var _btnL = _this.find(opts.btnL); 
25. var _btnR = _this.find(opts.btnR); 
26. var _imgBox = _this.find(opts.imgBox); 
27. var _imgBoxCur = _imgBox.filter(".present"); 
28. var _curText1 = _imgBoxCur.find(".text1"), _curText2 = _imgBoxCur.find(".text2"), _curImg = _imgBoxCur.find(".img"); 
29. var _imgBoxNext = null, _nextText1 = null, _nextText2 = null, _nextImg = null; 
30. var index = _imgBox.index(_imgBoxCur) || 0; 
31. var size = _imgBox.size(); 
32. var start = null; 
33. index++; 
34. if(index >= size) { 
35. index = 0; 
36. } 
37. _imgBoxNext = _imgBox.eq(index); 
38. _nextText1 = _imgBoxNext.find(".text1"); 
39. _nextText2 = _imgBoxNext.find(".text2"); 
40. _nextImg = _imgBoxNext.find(".img"); 
41. _imgBox.find(".text1, .text2, .img").css("left", widthWin); 
42. _imgBoxCur.find(".text1, .text2").css("left", (widthWin - 980) / 2 + "px"); 
43. _imgBoxCur.find(".img").css("left", (widthWin - 980) / 2 + 470 + "px"); 
44. _btnR.on("click", function() { 
45. animateSlideFn(); 
46. }); 
47. _btnL.on("click", function() { 
48. animateSlideFn(); 
49. }); 
50. start = setTimeout(function() { 
51. animateSlideFn(); 
52. start = setTimeout(arguments.callee, opts.delayTime); 
53. }, opts.delayTime); 
54. function animateSlideFn() { 
55. if(!(_imgBoxCur.find(".text1, .text2, .img").is(":animated") || _imgBoxNext.find(".text1, .text2, .img").is(":animated"))) { 
56. //当前帧动画 
57. _curText1.animate({ 
58. left: parseInt(_curText1.css("left")) + 100 
59. }, opts.animateTime * 0.6, function() { 
60. _curText1.animate({ 
61. left: "-510px" 
62. }, opts.animateTime); 
63. }); 
64. setTimeout(function() { 
65. _curText2.animate({ 
66. left: parseInt(_curText2.css("left")) + 100 
67. }, opts.animateTime * 0.6, function() { 
68. _curText2.animate({ 
69. left: "-510px" 
70. }, opts.animateTime); 
71. }); 
72. }, 200); 
73. setTimeout(function() { 
74. _curImg.animate({ 
75. left: parseInt(_curImg.css("left")) + 200 
76. }, opts.animateTime * 0.6, function() { 
77. _curImg.animate({ 
78. left: "-510px" 
79. }, opts.animateTime, function() { 
80. _imgBox.find(".text1, .text2, .img").css("left", widthWin); 
81. _imgBoxCur.removeClass("present"); 
82. }); 
83. }); 
84. }, 400); 
85. //下一帧动画 
86. setTimeout(function() { 
87. _imgBoxNext.addClass("present"); 
88. _nextText1.animate({ 
89. left: (widthWin - 980) / 2 - 100 
90. }, opts.animateTime, function() { 
91. _nextText1.animate({ 
92. left: (widthWin - 980) / 2 
93. }, opts.animateTime * 0.6); 
94. }); 
95. setTimeout(function() { 
96. _nextText2.animate({ 
97. left: (widthWin - 980) / 2 - 100 
98. }, opts.animateTime, function() { 
99. _nextText2.animate({ 
100. left: (widthWin - 980) / 2 
101. }, opts.animateTime * 0.6); 
102. }); 
103. }, 200); 
104. setTimeout(function() { 
105. _nextImg.animate({ 
106. left: (widthWin - 980) / 2 + 370 
107. }, opts.animateTime, function() { 
108. _nextImg.animate({ 
109. left: (widthWin - 980) / 2 + 470 
110. }, opts.animateTime * 0.6, function() { 
111. index++; 
112. if(index >= size) { 
113. index = 0; 
114. } 
115. _imgBoxCur = _imgBox.filter(".present"); 
116. _imgBoxNext = _imgBox.eq(index); 
117. _curText1 = _imgBoxCur.find(".text1"); 
118. _curText2 = _imgBoxCur.find(".text2"); 
119. _curImg = _imgBoxCur.find(".img"); 
120. _nextText1 = _imgBoxNext.find(".text1"); 
121. _nextText2 = _imgBoxNext.find(".text2"); 
122. _nextImg = _imgBoxNext.find(".img"); 
123. }); 
124. }); 
125. }, 400); 
126. }, opts.density * 1200); 
127. } 
128. } 
129. }); 
130. }; 
131. })(jQuery); 
132.  
133. $(function() { 
134. $(".animateSlide").animateSlide({ 
135. btnL: ".animateSlideBtnL", 
136. btnR: ".animateSlideBtnR", 
137. imgBox: ".animateSlideImgBox", 
138. animateTime: 500, 
139. delayTime: 6000, 
140. density: 0.9 
141. }); 
142. });