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. javascript随笔20160808

    var jsondata=$.parseJSON(@ViewBag.x); //转换为Json数据 var fruits = ["Banana", "Orange&quo ...

  2. SharePoint 2013 Excel Services ECMAScript 示例之明日限行

    前言:最近遇到一个“明日限行”的功能,北京的交通啊,这个不在今天讨论范围内,暂不吐槽,想想代码开发,还要写WebPart部署,很麻烦,而且部署服务器,需要领导审批,想绕过这个麻烦事儿,就想到客户端了, ...

  3. Oracle a Parameter with multi value

     备注:此两种方案,都因为oracle内部字符函数的参数长度4000限制.另外,个人测试,性能不如”将数据插入物理表再JOIN查询“或”每1000次ID做一次IN查询“的总的运行速度. 即ID的个数越 ...

  4. 国外干货！6个方法助你设计出优秀的APP

    伟大的设计来源于一致性和细致化,而其实只要有足够的纪律,每个团队都可以实现这一点. 品牌(源码:http://www.jinhusns.com/Products/Download/?type=xcj) ...

  5. 又一个高性能轻量级的iOS模型框架YYModel

    前言 iOS的模型框架其实有很多了,去年研究过Mantle,也了解过JSONModel.MJExtension,最近的项目项目优化的时候,再次考虑,基于轻量级.高性能的考虑,最终选择了YYModel. ...

  6. js 随机生成姓名、手机号、身份证号、银行卡号

    开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器.能不能自己写一个简单的生成器呢.下面是随机生成姓名.手机号.身份证号.银行卡号的j ...

  7. ajax参数设置略解

    通过ajax可以直接由页面访问到服务器.做到不刷新页面,就能刷新数据,为开发带来很大的便利. 1.ajax方式的参数及其功能: $.ajax({ type : "POST", // ...

  8. ORACLE OLAP错误ORA-06512: at "SYS.OLAPIHISTORYRETENTION"

    刚刚安装了ORACLE 10g R2后,启动数据库时发现告警日志有如下错误: Database Characterset is UTF8 replication_dependency_tracking ...

  9. [AlwaysOn Availability Groups]排查：AG超过RPO

    排查:AG超过RPO 在异步提交的secondary上执行了切换,你可能会发现数据的丢失大于RPO,或者在计算可以忍受的数据都是超过了RPO. 1.通常原因 1.网络延迟太高,网络吞吐量太低,导致Pr ...

  10. .net C# SqlHelper for Oracle

    适用于Oracle的sqlhelper 需要使用ODP.Net,引用Oracle.DataAccess.dll 推荐安装ODAC 代码如下: using System; using System.Co ...