20150621层叠轮播图

html================

<input type="button" id='left' value='左'>
<input type="button" id='right' value='右'>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>

css=================

*{
	margin: 0;padding: 0;

}
#box1{z-index: 1;position: absolute; 240px;height: 160px;left: 0px;top: 48px;background: red;}
#box2{z-index: 2;position: absolute; 360px;height: 200px;left: 98px;top: 24px;background: yellow;}
#box3{z-index: 3;position: absolute; 550px;height: 240px;left: 235px;top: 0px;background: blue;}
#box4{z-index: 2;position: absolute; 360px;height: 200px;left: 540px;top: 24px;background: orange;}
#box5{z-index: 1;position: absolute; 240px;height: 160px;left: 735px;top: 48px;background: green;}


js=================
var input=document.getElementsByTagName('input');
var div=document.getElementsByTagName('div');
var arr=[];
function css(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, null)[attr];
    }
}

for (var i = 0; i < div.length; i++) {
	arr.push([css(div[i],'left'),css(div[i],'top'),css(div[i],'width'),css(div[i],'height'),css(div[i],'zIndex')]);
}
input[0].onclick=function () {
	arr.unshift(arr.pop());
	for (var i = 0; i < div.length; i++) {
	move(div[i],{
			'left':parseInt(arr[i][0]),
			'top':parseInt(arr[i][1]),
			'width':parseInt(arr[i][2]),
			'height':parseInt(arr[i][3]),
			'zIndex':parseInt(arr[i][4])
		});
}
}
function move(obj,json) {
	obj.timer&& clearInterval(obj.timer);
	obj.timer=setInterval(function () {
		var stop=true;
		for(var i in json){
			var tar=json[i];
			var cur=parseInt(css(obj,i));
			var speed=(tar-cur)/7;
			speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
			if(i=='zIndex'){
				obj.style[i]=tar;
			}else{
				if(cur!=tar){
					stop=false;
					obj.style[i]=cur+speed+'px';
				}
			}	
		}
		if(stop){
			clearInterval(obj.timer);
			obj.timer=null;
		}
	},40);
}
//把样式传到数组里面，再付给dom元素