html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
#box1{
width:100px;
height:100px;
position: absolute;
background:orange;
left:200px;
opacity:0.5;
top:200px;
z-index: 1;
}
#box2{
width:100px;
height:100px;
position: absolute;
background:blue;
left:300px;
opacity: 1;
z-index: 2;
top:100px;
}
#box3{
width:100px;
opacity:0.5;
height:100px;
position: absolute;
background:red;
left:400px;
top:200px;
z-index: 1;
}
button{
width:50px;
height: 30px; }
</style>
</head>
<body>
<button id="btn2" value = "上"> < </button>
<button id="btn1" value = "下"> > </button>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
javascript
<script type="text/javascript" src="startmove.js"></script>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementsByTagName('button');
var oDiv = document.getElementsByTagName('div'); var arr = []; //获取每个方块的当前样式，并以数组的方式来保存
for(var i = 0 ;i < oDiv.length ; i++){
arr.push( [ parseInt( getStyle(oDiv[i] , 'left')) , parseInt( getStyle(oDiv[i] , 'top')) , getStyle(oDiv[i],'opacity') * 100 , parseInt(getStyle(oDiv[i] , 'zIndex'))])
}
console.log(arr) //上一张
oBtn[0].onclick = function(){ //向数组开头添加数组的最后一个元素，并将此元素删除
arr.unshift(arr[arr.length-1]);
arr.pop(arr[arr.length-1]); for(var i = 0; i < oDiv.length ; i ++){
startMove(oDiv[i] , { left : arr[i][0] , top : arr[i][1] , opacity : arr[i][2]});
oDiv[i].style.zIndex = arr[i][3];
} } //下一张
oBtn[1].onclick = function(){ //操作数组，将第一个元素放到数组最后，并将第一个元素删除
arr.push(arr[0]);
arr.shift(arr[0]); //重新赋值
for(var i = 0; i < oDiv.length ; i ++){
startMove(oDiv[i] , { left : arr[i][0] , top : arr[i][1] , opacity : arr[i][2]})
}
} //获取样式
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];//获取样式的最终值，改变之后的值，没有的话就获取css样式的值
}
}
}
</script>
startmove.js前面已经上传过了，这里就省略了