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)
作者：leona
jquery-抖动图组轮播动画的更多相关文章
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- jquery-自适应全屏背景轮播动画
实时自适应浏览器窗口大小的全屏背景轮播动画 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- WPF自定义控件二:Border控件与TextBlock控件轮播动画
需求:实现Border轮播动画与TextBlock动画 XAML代码如下: <Window.Resources> <Storyboard x:Key="OnLoaded1& ...
- 前端框架之jQuery（二）----轮播图,放大镜
事件 页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){}) -----------> ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【前端】javascript+jQuery实现旋转木马效果轮播图slider
实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...
随机推荐
- 给DB数据表加强制索引
DB2 数据库会根据DB层的统计值决定 根据查询条件走哪一个索引,某些情况下,由于未知原因,索引会走偏,故程序中可以规定程序走哪一个索引来避免索引走偏的情况发生. 强制走索引的 实例代码如下: SEL ...
- 常用ArcGIS for Silverlight 开发API介绍
1.API介绍 2.Map对象 3.Layer对象 4.Symbol对象 5.Task对象
- Git常用命令总结
Git常用命令总结 git init 在本地新建一个repo,进入一个项目目录,执行git init,会初始化一个repo,并在当前文件夹下创建一个.git文件夹. git clone ...
- 会话技术（ Cookie ，Session）
会话技术: 会话:浏览器访问服务器端,发送多次请求,接受多次响应.直到有一方断开连接.会话结束. 解决问题:可以使用会话技术,在一次会话的多次请求之间共享数据. ...
- 遇到别人留下的storyboard的,你需要一个引导图,但是不知道怎么跳转.
首先在AppDeledate.m文件里是这样. { self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds] ...
- You must use the Role Management Tool to install or configure Microsoft .NET Framework 3.5 SP1
今天在Windows Server 2008 下安装SQL SERVER 2008时,碰到如下错误: You must use the Role Management Tool to install ...
- Tomcat：配置SSL
SSL简述 SSL就是安全套接字层,是一种允许web浏览器和 web服务器通过安全连接通信的技术.这是一个双向的过程,这意味着 服务器和浏览器在发送数据之前加密所有交流的数据. SSL有一个重要的特点 ...
- C#winfrom播放器动态加载歌词
上周我们进行了结业项目答辩,是播放器项目.有一个关于播放器变唱歌边加载歌词的方法特别有意思,像酷狗那样子歌词和歌曲同步滚播的样子. 这里的工具是Visual Studio 2013,使用语言是C#和. ...
- 执行shell脚本，报错坏的解释器
在windows下面用editplus编写了一个shell脚本.执行时报错 "/bin/bash^M: 坏的解释器: 没有那个文件或目录 解决方法: 在终端输入sed -i 's/\r$// ...
- 还来一篇说下json_value 以及 json_query 的应用 (3)
上一篇说了一下openjson 的一些使用方法,这次再说一下在2016里面的查询取值,当然就是 json_query 和 json_value 这2兄弟了 首先 ) = '{"a" ...