jquery-抖动图组轮播动画

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

JQ匀速抖动图组轮播动画

一、HTML+CSS

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style>

         /*adv1 -- Hotspot Style Start*/

         body{ width:100%; height:100%; background-color:#7cc2f5; }

         ul,li{ padding:0; margin:0; border:0;}

         .hot {position: relative; left: 50%; top:100px; margin-left: -600px; width: 1200px; height: 730px;   }

         .hot .hot_center { margin:0 auto; position: relative; width: 1150px; height: 480px; overflow: hidden;   }

         .hot .hot_center .hot_pic { width: 8000000px; height: 310px; position: absolute; top: 0; left: 0; }

         .hot .hot_center .hot_pic ul { width: 1135px; height: 310px; float: left;  margin-right: 100px; }

         .hot .hot_center .hot_pic ul li { float: left; list-style:none; width: 280px; height: 310px; margin-right: 5px; }

         .hot .hot_center .hot_pic ul li:last-child { margin-right: 0; }

         /*adv1 -- Hotspot Style End*/

     </style>

     <script src="jquery-1.10.2.js"></script>

 </head>

 <body>

     <!--adv1 -- Hotspot Start-->

     <div class="cp">

         <div class="hot">

             <div class="hot_center">

                 <div class="hot_pic">

                     <ul>

                         <li><a href=""><img src="../img/adv1.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv2.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv3.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv4.jpg" /></a></li>

                     </ul>

                     <ul>

                         <li><a href=""><img src="../img/adv1.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv2.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv3.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv4.jpg" /></a></li>

                     </ul>

                     <ul>

                         <li><a href=""><img src="../img/adv1.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv2.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv3.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv4.jpg" /></a></li>

                     </ul>

                     <ul>

                         <li><a href=""><img src="../img/adv1.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv2.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv3.jpg" /></a></li>

                         <li><a href=""><img src="../img/adv4.jpg" /></a></li>

                     </ul>

                 </div>

             </div>

         </div>

     </div>

     <script src="hot.js"></script>

     <!--adv1 --Hotspot End-->

 </body>

 </html>

二、jq代码

 var pic = $(".hot .hot_center .hot_pic");//获取轮播图片大框

 var picNum = pic.find("ul").length;//获取轮播图组数量

 var picLong = pic.find("ul").width() + 100;//获取每个轮播图组的宽，加上其margin-right

 var nowpic = 0;//当前图片

 var flag = true;//判断左轮播或右轮播

 //抖动动画效果

 function Shake() {

     var i = 30;//抖动大小调节

     var uu = setInterval(function () {

         i -= 5;//抖动幅度调节

         pic.stop().delay(100).animate({ "left": (-picLong * nowpic) - i }, 100);

         pic.stop().animate({ "left": (-picLong * nowpic) + i }, 100);

         if (i <= 0) {

             clearInterval(uu);

         };

     }, 200);

 }

 //添加计时器开始轮播

 setInterval(function () {

     if (flag && nowpic <= picNum - 1) {

         nowpic++;

     };

     if (nowpic > picNum - 1) {

         nowpic = picNum - 1;

         flag = false;

     };

     if (!flag && nowpic > 0) {

         nowpic--;

     };

     if (nowpic <= 0) {

         flag = true;

     };

     pic.stop().animate({ "left": -picLong * nowpic }, 200);

     Shake();

 }, 4000)