描述：页面动态展示旋转木马的轮播图形式，用户鼠标放在轮播图区域内的时候，显示左右按钮，点击可移动切换图片。当一次切换完成后，才能进行下一次的切换，否则无效。鼠标离开区域后，左右按钮隐藏。
注意：小编用的是图片，在这里就不提供给大家了。包括左右的按钮也是图片。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马</title>
</head>
<style>
ul{
list-style: none;
}
.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);
}
</style>
<script>
window.onload = function () {
var arr = [
{
width:400,
top:70,
left:50,
opacity:20,
zIndex:2
},
{
width:600,
top:120,
left:0,
opacity:80,
zIndex:3
},
{
width:800,
top:100,
left:200,
opacity:100,
zIndex:4
},
{
width:600,
top:120,
left:600,
opacity:80,
zIndex:3
},
{
width:400,
top:70,
left:750,
opacity:20,
zIndex:2
}
];
//获取元素
var slide = document.getElementById("slide");
var liArr = slide.getElementsByTagName("li");
var arrow = slide.children[1];
var arrowChildren = arrow.children;
//设置一个开闭原则变量，点击以后修改这个值。
var flag = true;
//鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
slide.onmouseenter = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":100});
}
slide.onmouseleave = function () {
//arrow.style.opacity = 1;
animate(arrow,{"opacity":0});
}
//初始化页面，打开页面的时候，直接动画的方式展现
move();
//把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
arrowChildren[0].onclick = function () {
if(flag){
flag = false;
move(true);
}
}
arrowChildren[1].onclick = function () {
if(flag){
flag = false;
move(false);
}
}
//书写函数。
function move(bool){
//判断：如果等于undefined,那么就不执行这两个if语句
if(bool === true || bool === false){
if(bool){
arr.unshift(arr.pop());
}else{
arr.push(arr.shift());
}
}
//在次为页面上的所有li赋值属性，利用缓动框架
for(var i=0;i<liArr.length;i++){
animate(liArr[i],arr[i], function () {
flag = true;
});
}
}
}
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
function animate(ele,json,fn){
//先清定时器
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//开闭原则
var bool = true;
//遍历属性和值，分别单独处理json
//attr == k(键) target == json[k](值)
for(var k in json){
var leader;
//判断如果属性为opacity的时候特殊获取值
if(k === "opacity"){
leader = getStyle(ele,k)*100 || 1;
}else{
leader = parseInt(getStyle(ele,k)) || 0;
}
//获取步长
var step = (json[k] - leader)/10;
//二次加工步长
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader + step;
//赋值
//特殊情况特殊赋值
if(k === "opacity"){
ele.style[k] = leader/100;
//兼容IE678
ele.style.filter = "alpha(opacity="+leader+")";
//如果是层级，一次行赋值成功，不需要缓动赋值
}else if(k === "zIndex"){
ele.style.zIndex = json[k];
}else{
ele.style[k] = leader + "px";
}
//清除定时器
//判断: 目标值和当前值的差大于步长，就不能跳出循环
//目标位置和当前位置不相等，就不能清除清除定时器。
if(json[k] !== leader){
bool = false;
}
}
console.log(1);
//只有所有的属性都到了指定位置，bool值才不会变成false；
if(bool){
clearInterval(ele.timer);
//所有程序执行完毕了，现在可以执行回调函数了
//只有传递了回调函数，才能执行
if(fn){
fn();
}
}
},25);
}
</script>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<!--五张图片-->
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></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>
