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. 为 ...
随机推荐
- Oracle分页函数（存储过程）
create or replace package body Get_RecordByPage is StrSQL ); --分页函数 procedure GetRecordByPage(tblNam ...
- 【Swift】iOS开发历险记（一）
前言 边开发边学习,边攒经验,汇总一下记录到这里 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over140.cnblog ...
- GCD深入学习(1)dispatch_semaphore
dispatch_semaphore信号量是一种基于计数器的一种多线程同步机制 在多个线程访问共有资源的时候,会因为多线程的特性引发数据出错. - (void)addData { dispatch_q ...
- iOS开发之聊天模块--内容保存逻辑实现
需求详解: 在实际开发中,有可能是在后期优化的时候,会有这么需要优化的需求:聊天输入框保存之前输入的文本,提高用户的良好体验. 在聊天模块中,用户可能会在输入框输入若干字符,但是没有点击发送就点击退出 ...
- (一)Maven初步了解与认识
Apache Maven是一个软件项目管理的综合工具.基于项目对象模型(POM)的概念,提供了帮助管理构建.文档.报告.依赖.发布等方法,Maven简化和标准化项目建设过程.处理编译,分配,文档,团队 ...
- IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章
十年前,笔者还是一个刚毕业的大学生,对IT业只是停留在学校的编程知识领域.刚出社会,有很多需要学习的地方.在这十年间,笔者经历了程序员,技术经理,项目经理,部门经理等职位.本文就是要说说如何从程序员到 ...
- Linux 格式化扩展分区(Extended)
如果你在Linux系统中格式化磁盘时遇到如下错误,那么表示你正在格式化一个扩展分区. [root@GETTestLNX06 ~]# mkfs.ext4 /dev/sdb1 mke2fs 1.41. ...
- 正则表达式解析URL
正则表达式: var match = /^((ht|f)tps?:)\/\/([\w-]+(\.[\w-]+)*\/){1}(([\w-]+(\.[\w-]+)*\/?)*)?(\?([\w\-\., ...
- Apache 安装配置详情
本次文章讲解Apache的安装和基本的配置 输入PHP环境搭建的一部分 PHP完整配置信息请参考 http://www.cnblogs.com/azhe-style/p/php_new_env_bui ...
- 005.nginx配置文件
1.替换nginx主配置文件 通过前面的配置,LNMP的环境已经搭建完成,现在我们替换nginx配置文件: [root@huh ~]# cd /usr/local/nginx/conf/[root@h ...