JQuery-抖动图组轮播动画
JQ匀速抖动图组轮播动画
一、HTML+CSS
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <style> 8 /*adv1 -- Hotspot Style Start*/ 9 body{ width:100%; height:100%; background-color:#7cc2f5; } 10 ul,li{ padding:0; margin:0; border:0;} 11 .hot {position: relative; left: 50%; top:100px; margin-left: -600px; width: 1200px; height: 730px; } 12 .hot .hot_center { margin:0 auto; position: relative; width: 1150px; height: 480px; overflow: hidden; } 13 .hot .hot_center .hot_pic { width: 8000000px; height: 310px; position: absolute; top: 0; left: 0; } 14 .hot .hot_center .hot_pic ul { width: 1135px; height: 310px; float: left; margin-right: 100px; } 15 .hot .hot_center .hot_pic ul li { float: left; list-style:none; width: 280px; height: 310px; margin-right: 5px; } 16 .hot .hot_center .hot_pic ul li:last-child { margin-right: 0; } 17 /*adv1 -- Hotspot Style End*/ 18 </style> 19 <script src="jquery-1.10.2.js"></script> 20 </head> 21 <body> 22 <!--adv1 -- Hotspot Start--> 23 <div class="cp"> 24 <div class="hot"> 25 <div class="hot_center"> 26 <div class="hot_pic"> 27 <ul> 28 <li><a href=""><img src="../img/adv1.jpg" /></a></li> 29 <li><a href=""><img src="../img/adv2.jpg" /></a></li> 30 <li><a href=""><img src="../img/adv3.jpg" /></a></li> 31 <li><a href=""><img src="../img/adv4.jpg" /></a></li> 32 </ul> 33 <ul> 34 <li><a href=""><img src="../img/adv1.jpg" /></a></li> 35 <li><a href=""><img src="../img/adv2.jpg" /></a></li> 36 <li><a href=""><img src="../img/adv3.jpg" /></a></li> 37 <li><a href=""><img src="../img/adv4.jpg" /></a></li> 38 </ul> 39 <ul> 40 <li><a href=""><img src="../img/adv1.jpg" /></a></li> 41 <li><a href=""><img src="../img/adv2.jpg" /></a></li> 42 <li><a href=""><img src="../img/adv3.jpg" /></a></li> 43 <li><a href=""><img src="../img/adv4.jpg" /></a></li> 44 </ul> 45 <ul> 46 <li><a href=""><img src="../img/adv1.jpg" /></a></li> 47 <li><a href=""><img src="../img/adv2.jpg" /></a></li> 48 <li><a href=""><img src="../img/adv3.jpg" /></a></li> 49 <li><a href=""><img src="../img/adv4.jpg" /></a></li> 50 </ul> 51 </div> 52 </div> 53 </div> 54 </div> 55 <script src="hot.js"></script> 56 <!--adv1 --Hotspot End--> 57 </body> 58 </html>
二、jq代码
1 var pic = $(".hot .hot_center .hot_pic");//获取轮播图片大框 2 var picNum = pic.find("ul").length;//获取轮播图组数量 3 var picLong = pic.find("ul").width() + 100;//获取每个轮播图组的宽，加上其margin-right 4 var nowpic = 0;//当前图片 5 var flag = true;//判断左轮播或右轮播 6 7 //抖动动画效果 8 function Shake() { 9 var i = 30;//抖动大小调节 10 var uu = setInterval(function () { 11 i -= 5;//抖动幅度调节 12 pic.stop().delay(100).animate({ "left": (-picLong * nowpic) - i }, 100); 13 pic.stop().animate({ "left": (-picLong * nowpic) + i }, 100); 14 if (i <= 0) { 15 clearInterval(uu); 16 }; 17 }, 200); 18 } 19 20 //添加计时器开始轮播 21 setInterval(function () { 22 if (flag && nowpic <= picNum - 1) { 23 nowpic++; 24 }; 25 if (nowpic > picNum - 1) { 26 nowpic = picNum - 1; 27 flag = false; 28 }; 29 if (!flag && nowpic > 0) { 30 nowpic--; 31 }; 32 if (nowpic <= 0) { 33 flag = true; 34 }; 35 pic.stop().animate({ "left": -picLong * nowpic }, 200); 36 Shake(); 37 }, 4000)
作者：leona
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
