JQ例子：旋转木马
使用JQ现实旋转木马超级简单，它看起来很复杂，动画好像很难实现，但其实不然。
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马</title>
<style>
ul{
list-style: none;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #000;
}
.wrap{
width: 1200px;
margin: 0 auto;
}
.slide{
width: 1200px;
height: 500px;
/*background: pink;*/
position: relative;
}
.slide ul li{
position: absolute;
}
.slide ul li img{
width: 100%;
height: 100%;
}
.arrow a{
position: absolute;
text-align: center;
line-height: 76px;
top: 50%;
height: 76px;
width: 112px;
margin-top: -56px;
font-size: 40px;
font-weight: bold;
z-index: 100;
background: rgba(0,0,0,0.5);
color: #fff;
display: none;
}
.arrow a.pre{
left: 0;
}
.arrow a.next{
right: 0;
} </style>
</head>
<body> <div class="wrap">
<div class="slide">
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
</ul>
<div class="arrow">
<a href="javascript:;" class="pre"><</a>
<a href="javascript:;" class="next">></a>
</div>
</div>
</div> <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script> $(function(){
/*避免多次点击出现bug，只能在点击后动画完后才能再点击*/
var status=true;
var timer=null;
/*核心,把会变化的值存起来，然后动态循环这些值，然后添加到对应索引值的li标签里*/
var json=[{
width:400,
height:200,
top:20,
left:50,
opacity:0.2,
z:2
},{
width:600,
height:300,
top:70,
left:0,
opacity:0.8,
z:3
},{
width:800,
height:400,
top:0,
left:200,
opacity:1,
z:4
},{
width:600,
height:300,
top:70,
left:600,
opacity:0.8,
z:3
},{
width:400,
height:200,
top:20,
left:800,
opacity:0.2,
z:2
}];
move();
clearInterval(timer);
timer=setInterval(function(){
move(true);
},2000);
$(".slide").hover(function(){
/*为什么添加stop()，为了多次触发不断触发BUG，所以每次触发前都
*把之前的动画停止掉
*/
$(".arrow a").stop().fadeIn();
clearInterval(timer);
},function(){
$(".arrow a").stop().fadeOut();
timer=setInterval(function(){
move(true);
},2000);
})
$(".arrow .pre").on("click",function(){
if(status){
status=false;
move(true)
}
});
$(".arrow .next").on("click",function(){
if(status){
status=false;
move(false)
}
}); function move(offOn){
/*一开始调用时没有传值，但会走动一下，所以要判断没传值时，不走if语句里的内容*/
if(offOn!=undefined){
if(offOn){
/*使用数组删除会返回删除值，而它是删除最后一个，所以就是
*返回最后一个值
，然后数组的前追加*/
json.unshift(json.pop());
}else{
/*这个同样原理，只是它是数组的后追加，把数组的第一个追加到最后*/
json.push(json.shift());
}
}
$.each(json,function(i,v){
/*历遍json，添加到对应索引的li标签，使用animate实现动画效果*/
$(".slide ul li").eq(i).css("z-index",v.z).stop().animate({"width":v.width,"opacity":v.opacity,"left":v.left,"top":v.top,"height":v.height},500,function(){
/*这里就是动画完后执行的回调函数*/
status=true;
});
})
}
}) </script>
</body>
</html>
这里json是核心，只要变化json里数组的排序，就可以改变固定的图片的宽、高、透明度、层级、位置，然后使用animate这个动画方法实现到动画的效果。
最近收集的轮播图插件：传送门
图片滑动插件：superSilde-传送门
这是一款图片滑动很齐全的插件，而且学习起来很简单，源码算是不难的那种，没有使用很难让人看的懂的模式。
JQ例子：旋转木马的更多相关文章
- [Linux] jq：命令行JSON处理工具
jq命令帮助我们很方便地在终端查看和处理json文件 jq命令的帮助信息: abby@abby:bgs$ jq -h jq - commandline JSON processor [version ...
- 写一个简单的JQ插件(例子)
虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...
- jq,ajax,post例子。
jq post 例子 <script> $(function(){ $('#button').on('click', function(){ $.ajax({ type: 'POST', ...
- JavaScript--封装好的运动函数+旋转木马例子
封装好的运动函数: 1.能控制目标元素的多种属性 2.能自动获取元素的样式表: 3.获取样式函数兼容 4.能对于元素的多属性进行动画(缓动动画)修改 5.能区分透明度等没单位的属性和px属性的变化 a ...
- 【转】ASP.NET MVC框架下使用MVVM模式-KnockOutJS+JQ模板例子
KnockOutJS学习系列----(一) 好几个月没去写博客了,最近也是因为项目紧张,不过这个不是借口,J. 很多时候可能是因为事情一多,然后没法静下来心来去写点东西,学点东西. 也很抱歉,突然看到 ...
- jq实现图像旋转木马:轮焦点+关于控制+自己主动旋转木马
资源:http://www.ido321.com/862.html html代码: 1: <!DOCTYPE html> 2: <html lang="en"&g ...
- jq hover方法用法 例子
<script type="text/javascript"> $(function(){ $('.caseslist').hover(functi ...
- jq 全选与联动的小例子
function initcheckbox () { $(".j-jobs-power dl dt input").click(function () { if (this.che ...
- js与jq对数组的操作
一.数组处理 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长 ...
随机推荐
- 转贴 IT外企那点儿事完整版
转贴 IT外企那点儿事完整版 第一章:外企也就那么回儿事(http://www.cnblogs.com/forfuture1978/archive/2010/04/30/1725341.html) 1 ...
- hdu4738 Caocao's Bridges
http://acm.hdu.edu.cn/showproblem.php?pid=4738 题目大意:曹操赤壁之战大败,于是卷土重来.为了避免水上作战,他在长江上建立了一些岛屿,这样他的士兵就可以在 ...
- shell脚本学习（一）
Shell脚本最常用于系统管理工作,或者用于结合现有的程序以完成小型.特定的工作. Shell的特点有: 1. 简单性 2. 可移植性 3. 开发容易 [什么是shell] 简单点理解,就是系统跟计算 ...
- 搭建DHCP服务器以及DHCP中继服务器
一.DHCP服务器 1.首先配置DHCP服务器的IP地址(DHCP服务器网卡桥接在VMnet1) .配置好IP后重启DHCP服务 3.安装DHCP服务器,在这里我用的是YUM安装的(关于YUM ...
- vim不用鼠标复制粘贴
第一种方法(只能复制行): 在当前行3yy(表示复制3行,多行同理),然后鼠标移到需要粘贴的位置,按p,即可粘贴 第二种方法(无限制): 按v进入visual模式,移动光标(推荐使用hjkl,用熟后比 ...
- 信心题--FUOJ2226（莫队算法）
http://acm.fzu.edu.cn/problem.php?pid=2226 信心题,还说是信心题,题目给的真好.但是一点都不像信心题. 又是一个新的算法,莫队算法 莫队算法是一个用数组就可以 ...
- Git命令行初体验
1. git 版本控制系统 ==============运行环境======== 系统:windows git : Git-1.7.3.1-preview20101002.rar 下载地址:http ...
- Java递归输出指定路径下所有文件及文件夹
package a.ab; import java.io.File; import java.io.IOException; public class AE { public static void ...
- 『TCP/IP详解——卷一：协议』读书笔记——08
2013-08-21 13:56:23 3.3 IP路由选择 1. IP路由选择有两种情况.(1)如果目的主机与源主机直接相连(如点对点链路)或都在一个共享网络上(以太网或令牌环网),那么IP数据报就 ...
- 更改OneDrive同步文件夹
很无奈,自己的硬盘出现了一些小情绪,不能愉快的玩耍了.所以,我需要将我的文件进行转移. 本地文件还好,但是有一个问题——自动同步的OneDrive.总不能说以后每次同步还是原来的文件夹吧? 在OneD ...