旋转木马轮播图特效
共有五张图片，每张图片排列的位置是以中间为对称的。图片大小，透明度不相同，但对称的图片的样式是相同的。
呈现一种立体的轮播效果。
效果图如下：
做法：
1. 设置布局
其中：
在一个大盒子box中放置一个ul，ul内有五个li标签，分别用来放置图片。
并有两个div用作切换图片的左右箭头
<div class="box">
<ul>
<li class="li1"><img src="images/slidepic1.jpg" alt=""></li>
<li class="li2"><img src="images/slidepic2.jpg" alt=""></li>
<li class="li3"><img src="images/slidepic3.jpg" alt=""></li>
<li class="li4"><img src="images/slidepic4.jpg" alt=""></li>
<li class="li5"><img src="images/slidepic5.jpg" alt=""></li>
</ul>
<div class="left"><img src="images/prev.png" alt=""></div>
<div class="right"><img src="images/next.png" alt=""></div>
</div>2. 设置样式
使box居中显示，并设置每一个li绝对定位，然后设置了左右箭头的相关样式。
.box {
text-align: center;
position: relative;
width: 1260px;
height: 600px;
margin: 0 auto;
}
ul {
width: 800px;
margin: 0 auto;
}
li {
list-style: none;
position: absolute;
}
li img {
width: 100%;
height: 100%;
}
.left {
cursor: pointer;
position: absolute;
z-index: 5;
top: 50%;
left: 100px;
opacity: 0;
}
.right {
cursor: pointer;
position: absolute;
z-index: 5;
top: 50%;
right: 100px;
opacity: 0;
}3. JS中定义一个数组用来设置这五个li的位置（绝对定位）
var jsonArr = [
//第一张li位置
{ "opacity": 30,
"zIndex": 1,
"top": 80,
"left": 80,
"width": 400,
"height": 300
},
//第二张li位置
{ "opacity": 80,
"zIndex": 2,
"top": 140,
"left": 0,
"width": 650,
"height": 400
},
//第三张li位置
{ "opacity": 100,
"zIndex": 3,
"top": 110,
"left": 250,
"width": 800,
"height": 500
},
//第四张li位置
{ "opacity": 80,
"zIndex": 2,
"top": 140,
"left": 640,
"width": 650,
"height": 400
},
//第五张li位置
{ "opacity": 30,
"zIndex": 1,
"top": 80,
"left": 830,
"width": 400,
"height": 300
}
];4. 兼容性写法获取样式值
function getStyle(ele,attr) {
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
5. 定义一个animate(）方法（缓动动画方法）
//重新封装animate方法 解决某些兼容性问题如：opacity，zIndex等兼容性问题
function animate(ele,json,fn) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//利用开闭原则，判断所有属性是否一定全部到位，全部到位就清除定时器，否则将继续
var bool = true;
for(var i in json){
//parseInt(getStyle(ele,i)) || 0
//由于getStyle函数返回的类型不是number类型，所以要用进行转为number类型
// || 0 是为了避免出现某些属性没有定义而导致报错
var leader;
if(i == "opacity"){
leader = getStyle(ele,i)*100 || 1;
//用getStyle(ele,i)得到的opacity值时小数制，所以要乘以100
}else {
leader = parseInt(getStyle(ele,i)) || 0;
}
var step = (json[i]-leader)/10;
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader+step;
//要进行特殊情况的判断，当属性是zIndex，opacity，不能加单位
if(i == "zIndex"){
//层级问题不能用缓动动画做，否则会一闪一闪的
ele.style[i] = json[i];
} else if(i == "opacity"){
ele.style[i] = leader/100;
ele.style.filter = "alpha(opacity="+leader+")";
} else{
ele.style[i] = leader+"px";
}
//判断属性是否到位(不考虑有小数的情况)
if(json[i] !== leader){
bool = false;
}
}
if(bool){
clearInterval(ele.timer);
if(fn){
fn();
}
}
},20);
}6. 定义一个move()方法，使对应的li运动到指定的位置
刚开始，所有的li都放置在box盒子内的同一个位置。
当加载页面时，就执行一次move()方法，使得每个li运动到相对应的位置。
在说明move()方法之前，需要介绍一些数组的方法 ：
1. pop() 删除最后面的元素
2. push() 在最后面添加元素
3. shift() 删除最前面的元素
4. unshift() 在最前面添加元素
思路：
1. 点击左箭头时，将jsonArr数组中的最后一个元素，放在数组的最开头的位置。
在这里使用pop()方法，取出最后一个元素，再用push()方法将该元素添加到最开头的位置
2. 点击右箭头时，将jsonArr数组中的第一个元素，放在数组的最末尾的位置
在这里使用shift()方法，取出第一个元素，再用unshift()方法将该元素添加到最末尾的位置
3. 具体实现代码如下：
//封装一个move方法，完善旋转轮播图
//当bool为true时，为点击右箭头，否则就为左箭头
function move(bool) {
//在执行第一次move时，并不需要传递bool值
// 所以当bool不是undefined时，再进行判断即可
if(bool !== undefined){
if(bool){
var first = jsonArr.shift();
jsonArr.push(first);
}else {
var last = jsonArr.pop();
jsonArr.unshift(last);
}
}
for(var i=0;i<liArr.length;i++){
animate(liArr[i],jsonArr[i],function () {
flag = true;
});
}
}# 7. 最后，为左右箭头绑定点击事件，使li之间运动起来即可
//点击左侧按钮，图片逆时针旋转，jsonArr最后一个元素放在最开头
left.onclick = function () {
if(flag){
//一发生点击事件，就让flag为false
// 当animate方法执行完毕，执行了回调函数，下一次点击才会有效，这样可以避免恶意点击
flag = false;
move(false);
}
}
//点击右侧按钮，图片顺时针旋转，jsonArr第一个元素放在最末尾
right.onclick = function () {
if(flag){
flag = false;
move(true);
}
}