旋木马图

效果如下：

CSS部分

.wrap{
    width:1200px;
    margin:10px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
	list-style: none;
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 1;
}
.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);
}

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>
<script>
//新建一个数组，用于存放每一个Li的位置
 var arr = [
        {   //  1
            width:400,
            top:70,
            left:50,
            opacity:20,
            zIndex:2
        },
        {  // 2
            width:600,
            top:120,
            left:0,
            opacity:80,
            zIndex:3
        },
        {   // 3
            width:800,
            top:100,
            left:200,
            opacity:100,
            zIndex:4
        },
        {  // 4
            width:600,
            top:120,
            left:600,
            opacity:80,
            zIndex:3
        },
        {   //5
            width:400,
            top:70,
            left:750,
            opacity:20,
            zIndex:2
        }
    ];
//0.获取相关元素
var wrap = document.getElementById("wrap");
var liArr = document.getElementsByTagName("li");
var slide = document.getElementById("slide");
var arrow = document.getElementById("arrow");
var arrowChild = arrow.children;
var flag = true;//flag是为了防止多次点击左右按钮造成卡顿
//1.鼠标放在盒子上，两侧按钮显示，反之隐藏
slide.onmouseenter = function (){
	animate(arrow,{"opacity":100});
}
slide.onmouseleave = function (){
	animate(arrow,{"opacity":0});
}
move();
//2.把两侧按钮绑定事件。（调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转）
arrowChild[0].onclick = function(){
	if(flag){
		flag = false;	
		move(true);
	}
}
arrowChild[1].onclick = function(){
	if(flag){
		flag = false;
		move(false);
	}
}
//3.书写函数
//向左移动相当于把最后一个元素放在最前面，向右移动相当于把第一个元素放在最后一个
function move(bool){
	if(bool === true || bool === false){
		if(bool){
			arr.unshift(arr.pop());
		}else{
			arr.push(arr.shift());
		}
	}
	//4.为页面上所有的li赋值，利用缓动框架animate;
	for(var i=0; i<liArr.length; i++){
		animate(liArr[i],arr[i],function(){
			flag = true;
		});
	}
}
//5.用到的函数
//①获取元素样式的兼容函数
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;
            }

            //1.获取步长
            var step = (json[k] - leader)/10;
            //2.二次加工步长
            step = step>0?Math.ceil(step):Math.floor(step);
            leader = leader + step;
            //3.赋值
            //特殊情况特殊赋值
            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>

用到的图片







注：图片来源于网络，侵权必删