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. 本周进步要点20161023(含李笑来第二场live笔记要点)

    本周主要忙于去武汉参加iDOF2016智能数字油田会议,会上做了题为“油田SOA及云平台的系统思考与实践”的报告,为了准备这篇报告,用到了一些以前学过的知识,具体内容见“参加iDOF2016会议的收获 ...

  2. 每个程序员都会的 35 个 jQuery 小技巧

    1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return ...

  3. React Native知识7-TabBarIOS组件

    一:简介 两个TabBarIOS和TabBarIOS.Item组件可以实现页面Tab切换的功能,Tab页面切换的架构在应用开发中还是非常常见的.如:腾讯QQ,淘宝,美团外卖等等 二:TabBarIOS ...

  4. iOS 用 SDWebImage 清理图片缓存

    效果图如下: 1.找到 SDWebImage找到SDImageCache类 2.添加如下方法 - (float)checkTmpSize { ; NSDirectoryEnumerator *file ...

  5. iOS--浅谈iOS沙盒目录

    原文地址:http://blog.csdn.net/wzzvictory/article/details/18269713 出于安全考虑,iOS系统的沙盒机制规定每个应用都只能访问当前沙盒目录下面的文 ...

  6. ios webview自适应实际内容高度4种方法

    有的时候会碰见类似的苦逼需求, webview自适应实际内容高度 下面有四种方法供使用 方法1:获取webview中scrovllview的contentsize进行设置   1 2 3 4 5 6 ...

  7. 【从零开始学习Hadoop】--1.Hadoop的安装

    第1章 Hadoop的安装1. 操作系统2. Hadoop的版本3. 下载Hadoop4. 安装Java JDK5. 安装hadoop6. 安装rsync和ssh7. 启动hadoop8. 测试had ...

  8. IIS不能下载ini文件

    1.打开IIS. 2.选择站点或者存放*.ini文件的目录,右键菜单中选择属性. 3.选择“HTTP头”选项卡. 4.点击“MINE类型”. 5.点击“新建”. 6.这是跳出一个对话框,在“扩展名”一 ...

  9. Java环境变量的配置

    1.JAVA_HOMEjdk的路径,我的是安装在C:\Program Files (x86)\Java\jdk1.6.0_182.CLASSPATH .;%JAVA_HOME%\lib\dt.jar; ...

  10. Python进阶【第二篇】多线程、消息队列queue

    1.Python多线程.多进程 目的提高并发 1.一个应用程序,可以有多进程和多线程 2.默认:单进程,单线程 3.单进程,多线程 IO操作,不占用CPU python的多线程:IO操作,多线程提供并 ...