Jquery多种图片轮滚特效

5种超酷的Jquery轮换特效融为一体。

1. <script type="text/javascript">  
2.         $(document).ready(function(e) {  
3.             ImgRotation.Parent = $("#MainDiv");  
4.             ImgRotation.Initialize();  
5.         });  
6.         var ImgRotation = {  
7.             Parameters: [{  
8.                 width: "400",  
9.                 height: "250"  
10.             }],  
11.             Parent: null,  
12.             Mainchild: null,  
13.             tips: null,  
14.             index: 0,  
15.             dJson: [{  
16.                 imgTips: "img1",  
17.                 imgUrl: "img1.jpg"  
18.             }, {  
19.                 imgTips: "img2",  
20.                 imgUrl: "img2.jpg"  
21.             }, {  
22.                 imgTips: "img3",  
23.                 imgUrl: "img3.jpg"  
24.             }, {  
25.                 imgTips: "img4",  
26.                 imgUrl: "img4.jpg"  
27.             }, {  
28.                 imgTips: "img5",  
29.                 imgUrl: "img5.jpg"  
30.             }],  
31.             Initialize: function() {  
32.                 if (ImgRotation.Parent == null) {  
33.                     ImgRotation.Parent = $(document.body);  
34.                 }  
35.                 ImgRotation.Mainchild = $("<div id=\"container\"></div>");  
36.                 ImgRotation.Parent.append(ImgRotation.Mainchild);  
37.   
38.                 tips = $("<div id=\"tips\"></div>");  
39.                 tips.css("color", "#fff").css("padding-left", "10px").css("padding-top", "10px");  
40.                 tips.css("width", ImgRotation.Parameters[0].width   "px").css("height", "45px").css("background-color", "#333").css("opacity", "0.8").css("margin-top", ImgRotation.Parameters[0].height   "px");  
41.                 ImgRotation.Mainchild.append(tips);  
42.                 ImgRotation.Mainchild.hover(function() {  
43.                     tips.animate({  
44.                         marginTop: ImgRotation.Parameters[0].height - 45   "px"  
45.                     }, 500)  
46.                 }, function() {  
47.                     tips.animate({  
48.                         marginTop: ImgRotation.Parameters[0].height   "px"  
49.                     }, 500)  
50.                 });  
51.                 ImgRotation.Animate();  
52.             },  
53.             Clear: function() {  
54.                 $(".item").remove();  
55.             },  
56.             Animate: function() {  
57.               switch(ImgRotation.index){  
58.                   case 0:  
59.                   ImgRotation.RoationA();  
60.                   break;  
61.                    case 1:  
62.                     ImgRotation.RoationB();  
63.                   break;  
64.                    case 2:  
65.                     ImgRotation.RoationC();  
66.                   break;  
67.                    case 3:  
68.                     ImgRotation.RoationD();  
69.                   break;  
70.                     case 4:  
71.                     ImgRotation.RoationE();  
72.                   break;  
73.               }  
74.               ImgRotation.index  ;  
75.             },  
76.             RoationA: function() {  
77.                 ImgRotation.index = 0;  
78.                 tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);  
79.                 var bgLeft = $("<div class=\"item\" id=\"bgLeft\"></div>");  
80.                 bgLeft.css("width", ImgRotation.Parameters[0].width / 2   "px").css("height", ImgRotation.Parameters[0].height   "px").css("position", "absolute").css("background-image", 'url('   ImgRotation.dJson[ImgRotation.index].imgUrl   ')').css("margin-left", -ImgRotation.Parameters[0].width / 2   "px");  
81.                 var bgRifht = $("<div class=\"item\" id=\"bgRifht\"></div>");  
82.                 bgRifht.css("width", ImgRotation.Parameters[0].width / 2   "px").css("height", ImgRotation.Parameters[0].height   "px").css("position", "absolute").css("margin-left", ImgRotation.Parameters[0].width   "px").css("background-image", 'url('   ImgRotation.dJson[ImgRotation.index].imgUrl   ')').css("background-positionX", -ImgRotation.Parameters[0].width / 2   "px");  
83.                 ImgRotation.Mainchild.append(bgLeft);  
84.                 ImgRotation.Mainchild.append(bgRifht);  
85.                 bgLeft.animate({  
86.                     marginLeft: "0px"  
87.                 }, 200, function() {  
88.                     $(this).animate({  
89.                         marginLeft: "-100px"  
90.                     }, 250, function() {  
91.                         $(this).animate({  
92.                             marginLeft: "0px"  
93.                         }, 100, function() {  
94.                             $(this).animate({  
95.                                 marginLeft: "-50px"  
96.                             }, 100, function() {  
97.                                 $(this).animate({  
98.                                     marginLeft: "0px"  
99.                                 }, 50);  
100.                             });  
101.                         })  
102.                     });  
103.                 });  
104.                 bgRifht.animate({  
105.                     marginLeft: ImgRotation.Parameters[0].width / 2   "px"  
106.                 }, 200, function() {  
107.                     var basicLeft = ImgRotation.Parameters[0].width / 2;  
108.                     $(this).animate({  
109.                         marginLeft: basicLeft   100   "px"  
110.                     }, 250, function() {  
111.                         $(this).animate({  
112.                             marginLeft: basicLeft   "px"  
113.                         }, 100, function() {  
114.                             $(this).animate({  
115.                                 marginLeft: basicLeft   50   "px"  
116.                             }, 100, function() {  
117.                                 $(this).animate({  
118.                                     marginLeft: basicLeft   "px"  
119.                                 }, 50);  
120.                             });  
121.                         });  
122.                     });  
123.                 });  
124.             },  
125.             RoationB: function() {  
126.                 ImgRotation.Clear();  
127.                 ImgRotation.index = 1;  
128.                 tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);  
129.                 for (var i = 0; i < 10; i  ) {  
130.                     var mWidth = ImgRotation.Parameters[0].width / 10;  
131.                     var mImgC = $("<div class=\"item rotationB\"></div>");  
132.                     $(mImgC).css({  
133.                         "width": mWidth   "px",  
134.                         "height": ImgRotation.Parameters[0].height   "px",  
135.                         "background-image": 'url('   ImgRotation.dJson[ImgRotation.index].imgUrl   ')',  
136.                         "background-positionX": -mWidth * i   "px",  
137.                         "position": "absolute",  
138.                         "margin-left": mWidth * i   "px",  
139.                         "margin-top": -ImgRotation.Parameters[0].height   "px"  
140.                     });  
141.                     ImgRotation.Mainchild.append(mImgC);  
142.                     mImgC.animate({  
143.                         marginTop: "0px"  
144.                     }, 300   i * 100);  
145.                 }  
146.             },  
147.             RoationC: function() {  
148.                 ImgRotation.Clear();  
149.                 ImgRotation.index = 2;  
150.                 tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);  
151.                 for (var i = 0; i < 10; i  ) {  
152.                     var mHeight = ImgRotation.Parameters[0].height / 10;  
153.                     var mImgC = $("<div class=\"item\"></div>");  
154.                     $(mImgC).css({  
155.                         "width": ImgRotation.Parameters[0].width   "px",  
156.                         "height": mHeight   "px",  
157.                         "background-image": 'url('   ImgRotation.dJson[ImgRotation.index].imgUrl   ')',  
158.                         "background-positionY": -mHeight * i   "px",  
159.                         "position": "absolute",  
160.                         "margin-top": mHeight * i   "px",  
161.                         "margin-left": -ImgRotation.Parameters[0].width   "px"  
162.                     });  
163.                     ImgRotation.Mainchild.append(mImgC);  
164.                     mImgC.animate({  
165.                         marginLeft: "0px"  
166.                     }, 300   i * 100);  
167.                 }  
168.             },  
169.             RoationD: function() {  
170.                 ImgRotation.Clear();  
171.                 ImgRotation.index = 3;  
172.                 tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);  
173.                 mWidth = ImgRotation.Parameters[0].width / 4;  
174.                 mHeight = ImgRotation.Parameters[0].height / 3;  
175.                 for (var i = 0; i < 12; i  ) {  
176.                     var mImgC = $("<div class=\"item\"></div>");  
177.                     $(mImgC).css({  
178.                         "width":"0px",  
179.                         "height":"0px",  
180.                         "position": "absolute",  
181.                         "background-image": 'url('   ImgRotation.dJson[ImgRotation.index].imgUrl   ')'  
182.                     });  
183.                     ImgRotation.Mainchild.append(mImgC);  
184.                     if (i >= 0 && i <= 3) {  
185.                         $(mImgC).css({  
186.                             "margin-top": "0px",  
187.                             "margin-left": mWidth*i   "px",  
188.                             "background-positionX": -mWidth * i   "px"  
189.                         });  
190.                           
191.                     }else if(i>3&&i<=7){  
192.                         $(mImgC).css({  
193.                             "height":"0px",  
194.                             "margin-top": mHeight "px",  
195.                             "margin-left": mWidth*(i-4)   "px",  
196.                             "background-positionX": -mWidth * (i-4)   "px",  
197.                             "background-positionY": -mHeight   "px"  
198.                         });  
199.                     }else{  
200.                         $(mImgC).css({  
201.                             "margin-top": mHeight*2 "px",  
202.                             "margin-left": mWidth*(i-8)   "px",  
203.                             "background-positionX": -mWidth * (i-8)   "px",  
204.                             "background-positionY": -mHeight*2   "px"  
205.                         });  
206.                     }  
207.                     mImgC.animate({width: mWidth "px",height:mHeight "px"}, 500   i * 50);  
208.                 }  
209.             },  
210.             RoationE: function() {  
211.                 ImgRotation.Clear();  
212.                 ImgRotation.index = 4;  
213.                 tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);  
214.                 mWidth = ImgRotation.Parameters[0].width / 4;  
215.                 mHeight = ImgRotation.Parameters[0].height / 3;  
216.                 for (var i = 0; i < 12; i  ) {  
217.                     var mImgC = $("<div class=\"item\"></div>");  
218.                     $(mImgC).css({  
219.                         "width":mWidth "px",  
220.                         "height":mHeight "px",  
221.                         "opacity":"0",  
222.                         "position": "absolute",  
223.                         "background-image": 'url('   ImgRotation.dJson[ImgRotation.index].imgUrl   ')'  
224.                     });  
225.                     ImgRotation.Mainchild.append(mImgC);  
226.                     if (i >= 0 && i <= 3) {  
227.                         $(mImgC).css({  
228.                             "margin-top": "0px",  
229.                             "margin-left": mWidth*i   "px",  
230.                             "background-positionX": -mWidth * i   "px"  
231.                         });  
232.                           
233.                     }else if(i>3&&i<=7){  
234.                         $(mImgC).css({  
235.                             "margin-top": mHeight "px",  
236.                             "margin-left": mWidth*(i-4)   "px",  
237.                             "background-positionX": -mWidth * (i-4)   "px",  
238.                             "background-positionY": -mHeight   "px"  
239.                         });  
240.                     }else{  
241.                         $(mImgC).css({  
242.                             "margin-top": mHeight*2 "px",  
243.                             "margin-left": mWidth*(i-8)   "px",  
244.                             "background-positionX": -mWidth * (i-8)   "px",  
245.                             "background-positionY": -mHeight*2   "px"  
246.                         });  
247.                     }  
248.                     mImgC.animate({opacity:1}, 500   i * 300);  
249.                 }  
250.             }  
251.         }  
252.     </script>