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. 为 ...
随机推荐
- JavaScript 数据类型
JavaScript 数据类型 字符串.数字.布尔.数组.对象.Null.Undefined JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: 一,JavaScript 字符串 ...
- 征友记之---前端开发Partner
简单自述下: 本人前端开发者,深圳一公司在职员工,非出自前端科班,乃自学前端已近两年之久. 受前端 ...
- 解决JqueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug
前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug.今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题. 首先先上图描 ...
- 从头开始构建LINUX[内核更新和资料]
了解了LFS的内容后,至于内核的更新就一目了然了 http://www.cnblogs.com/2018/p/3979305.html http://www.cnblogs.com/2018/p/39 ...
- android 自定义view中findViewById为空的解决办法
网上说的都是在super(context, attrs);构造函数这里少加了一个字段, 其实根本不只这一个原因,属于view生命周期的应该知道,如果你在 自定义view的构造函数里面调用findVie ...
- 搭建自己的PHP框架心得（三）
h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h ...
- MonjaDB —— 基于 Eclipse 的 MongoDB GUI 客户端工具(转载)
原文链接http://www.oschina.net/question/12_59707 MonjaDB 是一个 MongoDB 的 GUI 客户端工具,提供直观的 MongoDB 数据管理的功能,支 ...
- 你不一定懂的cpu显示信息
在linux命令中用top查看系统的情况,在cpu这一行有一些分部表示什么 下面有一篇博文,对此写的非常清楚,特转载.猛击下面的链接 http://www.cnblogs.com/yjf512/p/3 ...
- 直播时代--IOS直播客户端SDK，美颜直播【开源】
当前视频直播非常火爆,手机端的视频直播也非常火爆,PGC.UGC的视频直播门槛都降低了很多. 本文介绍一个:IOS 客户端直播的SDK,代码完全开源. 直播时代:让IOS普通开发者一天内做出一个RTM ...
- STM32电机控制器小心得
首先声明的是本人刚刚大学毕业进入电机控制这个行业,以前在学校也做过类似51的实验,然而在工作中发现那些东西是皮毛的不能再皮毛,我现在在公司也算是一个实习生,主要工作是改各厂家对控制器的功能需求,(其实 ...