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. 为 ...
随机推荐
- DevExpress使用的过期版本解决方法
Windows控件确实有点丑,一般刚学习VS编程或者临时创建测试程序时才会使用:第三方控件,增强了一些功能,美化了控件,现在比较流行:再高级一点,就是使用WPF,看效果还不错,估计以后会成为C/S的主 ...
- Mac Security工具使用总结
Security是Mac系统中钥匙串和安全模块的命令行管理工具,(图形化工具为Keychain Access.app).钥匙串(Keychain)实质上就是一个用于存放证书.密钥.密码等安全认证实体的 ...
- Java暗箱操作之for-each
对于我们常用的ArrayList等容器类,经常需要一个一个遍历里面的元素,从而对各个元素执行对应的操作. 像我代码写多了,通常的做法是用传统的,类似于数组遍历的方法,即在for循环中设置一个int变量 ...
- 集合3--毕向东java基础教程视频学习笔记
Day 15 集合框架01 TreeSet02 TreeSet存储自定义对象03 二叉树04 实现Comparator方式排序05 TreeSet练习06 泛型概述07 泛型使用08 泛型类09 泛型 ...
- Java怎么添加背景图片
首先,导入相关的包: import java.awt.BorderLayout; import java.awt.Container; import javax.swing.ImageIcon; im ...
- java实现批量下载百度图片搜索到的图片
就是写的个小程序,用于记录一下,方便后续查看,首先感谢下面这个博客,从这篇文章衍生的吧,大家可以学习下: http://www.cnblogs.com/lichenwei/p/4610298.html ...
- Python urllib2 调试
#!/usr/bin/env python # coding=utf-8 __author__ = 'zhaoyingnan' import urllib import urllib2 import ...
- 手把手教你玩GDB
第一部分牛刀小试:启动GDB开始调试 1. 编译带调试信息的可执行程序:用gcc(g++)编译的时候带上-g选项即可 2. 启动GDB开始调试 (1)gdb program ...
- 使用Struts框架，实现用户登陆功能
前言:本篇文章是本人这周学习的一个小结,在自我总结的同时,希望也能够给其他同学带来一点帮助.本文主要知识是参照书本上的知识点以及网上其他博客文章,在上机操练后的所得,具体源码主要来自http://bl ...
- OpenStack 企业私有云的若干需求（3）：多租户和租户间隔离(multi-tenancy and isolation)
本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...