*{margin:0;padding:0;}div{width:500px;height:500px;margin:150px auto;position:relative;perspective:800px;}ul{list-style:none;width:500px;height:280px;}li{position:absolute;top:0;left:0;transition:all 1s;}li.center{transform:translateZ(100px);z-index:10;}li.left1{transform:rotateY(25deg) translateX(-150px);z-index:9;}li.left2{transform:rotateY(18deg) translateX(-300px);z-index:8;}li.right1{transform:rotateY(-25deg) translateX(150px);z-index:9;}li.right2{transform:rotateY(-18deg) translateX(300px);z-index:8;}li.back{transform:translateZ(-200px);z-index:1;}span{width:60px;height:60px;background:rgba(255,255,255,.3);color:#fff;font-weight:bold;position:absolute;left:-380px;top:80px;z-index:11;font-size:50px;text-align:center;line-height:60px;cursor:pointer;}span:nth-of-type(2){left:810px;}
window.οnlοad=function(){varul=document.getElementsByTagName("ul")[0];vardiv=document.getElementsByTagName("div")[0];varlis=document.getElementsByTagName("li");varspans=document.getElementsByTagName("span");varclasses=["left2","left1","center","right1","right2","back","back","back","back"];varlock=false //定义动画锁,false为没锁定
spans[0].οnclick=function(){if(lock==false){//如果动画没有被锁
lock=true;
setTimeout(function(){
lock=false;//1秒后解锁
},500);varfirst_class=classes.shift();//取出数组第一个元素
classes.push(first_class);//将取出的第一个元素加到放到数组最后
for(vari=0;i
lis[i].className=classes[i];//将lis的类与classes对应起来
}
}
}
spans[1].οnclick=function(){if(lock==false){//如果动画没有被锁
lock=true;
setTimeout(function(){
lock=false;//1秒后解锁
},500);varlast_class=classes.pop();
classes.unshift(last_class);for(varj=0;j
lis[j].className=classes[j];
}
}
}
}
<
>