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)

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/5950280.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接

jquery-抖动图组轮播动画的更多相关文章

  1. jQuery轻量级京东图片轮播代码等

    http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码   查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...

  2. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  3. jquery-自适应全屏背景轮播动画

    实时自适应浏览器窗口大小的全屏背景轮播动画 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  4. 使用javascript,jquery实现的图片轮播功能

    使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...

  5. WPF自定义控件二:Border控件与TextBlock控件轮播动画

    需求:实现Border轮播动画与TextBlock动画 XAML代码如下: <Window.Resources> <Storyboard x:Key="OnLoaded1& ...

  6. 前端框架之jQuery（二）----轮播图,放大镜

    事件 页面载入   ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.   $(document).ready(function(){}) -----------> ...

  7. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  8. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

随机推荐

  1. .html(),.text()和.val()的差异总结

    .html(),.text(),.val()三种方法都是用来读取选定元素的内容:只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其后代 ...

  2. 天津政府应急系统之GIS一张图（arcgis api for flex）讲解（五）地图切换以及图层显示模块

    config.xml文件的配置如下: <widget right="20" top="55" config="widgets/MapSwitch ...

  3. childViewController 小计

    设置childViewcontroller Unbalanced calls to begin/end appearance transitions for 以上报错 需要添加 transitionF ...

  4. iOS 根据银行卡号判断银行名称

    如何根据银行卡号判断银行名称? + (NSString *)getBankName:(NSString*) cardId{ //"发卡行.卡种名称", NSArray* bankN ...

  5. 转载自jguangyou的博客，XML基本属性大全

    android:layout_width 指定组件布局宽度 android:layout_height 指定组件布局高度 android:alpha 设置组件透明度 android:backgroun ...

  6. weblogic安装注意事项_linux

    ➠更多技术干货请戳:听云博客 一.安装过程:参考“weblogic安装截屏(linux)” 注意事项:安装weblogic时,需要注意以下两点: 1.首先在安装目录下创建weblogic12文件夹 如 ...

  7. 利用ShareSDK进行第三方登录和分享

    到相应开发者平台注册开发者账号,并添加你要进行分享和使用第三方登录应用的信息. 添加新浪微博应用 注册网址 http://open.weibo.com添加QQ应用 注册网址  http://mobil ...

  8. 常用的HTTP状态代码

    常用的HTTP状态代码如下: 400 无法解析此请求. 401.1 未经授权:访问由于凭据无效被拒绝. 401.2 未经授权: 访问由于服务器配置倾向使用替代身份验证方法而被拒绝. 401.3 未经授 ...

  9. MySQL ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)的真正原因

    在博客Linux mysql 5.6: ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: N ...

  10. Android上传文件至服务器(上)

    每一次都不能上首页,真悲催..管理员让我上一次首页? 很多时候我更愿意一个人写代码,与其在垃圾代码上改改改,我更愿意直接重构. 整洁的代码简单直接.整洁的代码如同优美的散文.整洁的代码从不隐藏设计者的 ...