HTML页面
<!DOCTYPE html>
<html>
<head lang="en">
???<meta charset="UTF-8">
???<title>旋转木马轮播图</title>
???<link rel="stylesheet" href="css/css.css"/>
???<!--先引工具包,在引逻辑包-->
???<script src="js/jquery-1.11.1.js"></script>
???<script src="js/index.js"></script>
</head>
<body>
???<div class="wrap" id="wrap">
??????<div class="slide" id="slide">
??????????<ul>
??????????????<li><a href="#"><img src="images/slidepic1.jpg" /></a></li>
??????????????<li><a href="#"><img src="images/slidepic2.jpg" /></a></li>
??????????????<li><a href="#"><img src="images/slidepic3.jpg" /></a></li>
??????????????<li><a href="#"><img src="images/slidepic4.jpg" /></a></li>
??????????????<li><a href="#"><img src="images/slidepic5.jpg" /></a></li>
??????????</ul>
??????????<div class="arrow" id="arrow">
??????????????<a href="javascript:;" class="prev"></a>
??????????????<a href="javascript:;" class="next"></a>
??????????</div>
??????</div>
???</div>
</body>
</html>
CSS内容
@charset "UTF-8";
/*初始化 ?reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}
.wrap{
???width:1200px;
???margin:10px auto;
}
.slide {
???height:500px;
???position: relative;
}
.slide li{
???position: absolute;
???left:200px;
???top:0;
}
.slide li img{
???width:100%;
}
.arrow{
???opacity: 0;
}
.prev,.next{
???width:76px;
???height:112px;
???position: absolute;
???top:50%;
???margin-top:-56px;
???background: url(../images/prev.png) no-repeat;
???z-index: 99;
}
.next{
???right:0;
???background-image: url(../images/next.png);
}
JS中index.js内容
jQuery(function () {
???//旋转木马的逻辑包
???????//旋转木马思路：点击左侧或者右侧按钮，移动样式或者移动li标签的位置;
???var arrOfJson = [
???????{ ??// ?1
???????????width:400,
???????????top:70,
???????????left:50,
???????????opacity:0.2,
???????????"z-index":2
???????},
???????{ ?// 2
???????????width:600,
???????????top:120,
???????????left:0,
???????????opacity:0.8,
???????????"z-index":3
???????},
???????{ ??// 3
???????????width:800,
???????????top:100,
???????????left:200,
???????????opacity:1,
???????????"z-index":4
???????},
???????{ ?// 4
???????????width:600,
???????????top:120,
???????????left:600,
???????????opacity:0.8,
???????????"z-index":3
???????},
???????{ ??//5
???????????width:400,
???????????top:70,
???????????left:750,
???????????opacity:0.2,
???????????"z-index":2
???????}
???];
???//需求1：页面加载的时候所有li标签按照arrOfJson中的样式滑动过去;
???????????//鼠标进入显示左右按钮，移开隐藏;（用opacity控制）
???//需求2：点击右侧按钮，删除数组中的第一个，添加到最末尾;
???//需求3：点击左侧按钮，逻辑相反;
???//需求1：页面加载的时候所有li标签按照arrOfJson中的样式滑动过去;
???????//鼠标进入显示左右按钮，移开隐藏;（用opacity控制）
???$("#slide li").each(function (index,ele) {
???????//ele是DOM元素;
???????$(ele).css("z-index",arrOfJson[index]["z-index"]);
???});
???$("#slide li").each(function (index,ele) {
???????//ele是DOM元素;
???????$(ele).animate(arrOfJson[index],400);
???})
???$("#slide").mouseenter(function () {
???????$("#arrow").animate({"opacity":1});
???})
???$("#slide").mouseleave(function () {
???????$("#arrow").animate({"opacity":0});
???})
???//需求2：点击右侧按钮，删除数组中的第一个，添加到最末尾;
???$(".next").on("click", function () {
???????//删除数组中的第一个，添加到最末尾;
???????var first = arrOfJson.shift();
???????arrOfJson.push(first);
???????//安装新数组在加载一次;
???????$("#slide li").each(function (index,ele) {
???????????//ele是DOM元素;
???????????$(ele).css("z-index",arrOfJson[index]["z-index"]);
???????});
???????$("#slide li").each(function (index,ele) {
???????????//ele是DOM元素;
???????????$(ele).stop().animate(arrOfJson[index],400);
???????})
???});
???//需求3：点击左侧按钮，逻辑相反;
???$(".prev").on("click", function () {
???????//删除数组中的最后一个，添加到最前面;
???????var last = arrOfJson.pop();
???????arrOfJson.unshift(last);
???????//安装新数组在加载一次;
???????$("#slide li").each(function (index,ele) {
???????????//ele是DOM元素;
???????????$(ele).css("z-index",arrOfJson[index]["z-index"]);
???????});
???????$("#slide li").each(function (index,ele) {
???????????//ele是DOM元素;
???????????$(ele).stop().animate(arrOfJson[index],400);
???????})
???});
})
旋转木马（jQuery实现）
原文地址：http://www.cnblogs.com/sunqq/p/7600543.html