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. 火狐浏览器如何js关闭窗口的几种解决方法

    今天在项目上有一个页面要求在几秒后自动关闭,想着还比较简单,用window.close()就可以了,但是用IE/谷歌/火狐浏览器试了一下,发现IE可以,谷歌用网上的兼容方法也可以实现,但是火狐这里卡住 ...

  2. Material Design 概念,环境和基本属性

    Material Design 概念,环境和基本属性 Material Design是随Android 5.0推出的一种设计概念, 涉及到了跨平台和设备的视觉,动态,交互设计等方面.   设计概念 M ...

  3. iOS中的交换空间(swap space)

    看来是没有交换空间,原因是闪存和SSD硬盘相比,速度很慢,也有电源管理的原因. the NAND flash is not designed to be used as swap. It is dam ...

  4. Android 刷新相册

    Android4.4之前: sendBroadcast(new Intent(Intent.ACTION_MEDIA_MOUNTED,Uri.parse("file://" + f ...

  5. ToolBar和DrawerLayout的使用实现侧拉栏抽屉的开闭

    1.如图可以看到textColorPrimary,colorPrimary,colorPrimaryDark,navigationBarColor等颜色属性代表的相应位置,如下图 2.具体属性在res ...

  6. iOS开发之功能模块--本地序列化

    下面只展示项目开发中,本地序列化的示例代码: AuthenticationManager.h #import <Foundation/Foundation.h> #import " ...

  7. LVS+Keepalived+Squid+Nginx+MySQL主从高性能集群架构部署方案

    方案一,在tomcat的workers.properties里面配置相关条件 worker.tomcat.lbfactor= worker.tomcat.cachesize= worker.tomca ...

  8. 关于reids

    redis 官网(英文):https://redis.io/ redis 手册(中文): http://doc.redisfans.com/ redis 中文网(中文) : http://www.re ...

  9. .Net Collection的一些理解——记录一次向实习生的答疑

    公司最近进了个实习生,每天下班前我都会花一些时间来解答一下实习生的一些疑问.今天问起了关于集合排序方法Sort的一些疑问,这让我一下回到自己刚刚入行的时候.那个时候也遇到了集合排序的问题,为发现接口I ...

  10. CLR线程概览（一）

    托管 vs. 原生线程 托管代码在“托管线程”上执行,(托管线程)与操作系统提供的原生线程不同.原生线程是在物理机器上执行的原生代码序列:而托管线程则是在CLR虚拟机上执行的虚拟线程. 正如JIT解释 ...