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. 为 ...
随机推荐
- python操作SQL
pymysql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同 一.下载安装 pip3 install pymysql 二.操作使用 1.执行SQL #!/usr ...
- VS2012 Unit Test（Void, Action, Func） —— 对无返回值、使用Action或Func作为参数、多重载的方法进行单元测试
[提示] 1. 阅读文本前希望您具备如下知识:了解单元测试,了解Dynamic,熟悉泛型(协变与逆变)和Lambda,熟悉.NET Framework提供的 Action与Func委托.2.如果您对单 ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q116-Q120)
Question 116 You are helping a corporate IT department create a SharePoint 2010 information archite ...
- 敏捷开发与jira之阶段工作项概述
每次迭代都分这5个阶段,但每个阶段的时间根据版本情况定,最终目标是:第一个阶段拿到交付范围,在第五个阶段都完成,并拿到本次版本团队所消耗的工时. Jira是项目过程管理的一种手段,跟多体现在工时跟踪, ...
- 八爪鱼招标网的百度权重升为2了，独立IP也从0快速发展为1000
自八爪鱼招标网上线以来,本着以客户一切利益为出发点,坚持提供国内首个免费招标信息平台为目标,经过各位同事不断地努力,不断收集客户各种各样的招标.采购实际需求,与政府.事业单位及中小型企业一对一的沟 ...
- C# Attribute学习
由于项目中需要使用到序列化相关的技术,从而想到是否可以使用C#中的特性,特此花了近两小时学习了一下. 对于特性的学习,主要参考了两篇博文,特此感谢.以下附链接: http://www.cnblogs. ...
- 不同环境下文件上传Uncaught SyntaxError: Unexpected end of input
很奇怪的问题,相同的代码和相同的数据,在两台linux服务器上执行文件上传,一台正常上传,一台在ftl页面 报:Uncaught SyntaxError: Unexpected end of inpu ...
- 【转】去除eclipse的JS验证
第一步:去除eclipse的JS验证:将windows->preference->Java Script->Validator->Errors/Warnings->Ena ...
- linux
托瓦兹跟BBS上面一堆工秳师一样, 他发现Minix虽然真癿很棒,但是谭宁邦教授就是丌愿意迚行功能癿加强,导致一堆工秳师在操作系统功能上面癿欲求丌满! 这个时候年轻癿托瓦兹就想:『既然如此,那我何丌自 ...
- Python urllib2 调试
#!/usr/bin/env python # coding=utf-8 __author__ = 'zhaoyingnan' import urllib import urllib2 import ...