标签：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script language="javascript"> window.onload=function(){ var ulDom=document.getElementById("ulBox"); var liObj=ulDom.getElementsByTagName("li"); var leftBtn=document.getElementById("leftDiv"); var rightBtn=document.getElementById("rightDiv"); var deg=0; var exps=null; var info=null; var num=null; leftBtn.addEventListener("click",auto,false); rightBtn.addEventListener("click",auto,false); function auto(){ var btnStr=this.getAttribute("id"); if(btnStr == "leftDiv"){ info=setInterval(leftImg,8); }else{ info=setInterval(rightImg,8); } this.removeEventListener("click",auto,false); console.log(); } function leftImg(){ deg=deg+1; exps=deg / 90; num=parseInt(exps)+1; if(isNum(exps)){ clearInterval(info); leftBtn.addEventListener("click",auto,false); }else{ ulDom.style.transform="rotateX("+deg+"deg)"; } } function rightImg(){ deg=deg-1; exps=deg / 90; num=parseInt(exps)+1; if(isNum(exps)){ clearInterval(info); rightBtn.addEventListener("click",auto,false); }else{ ulDom.style.transform="rotateX("+deg+"deg)"; } } //是否为整数 function isNum(s){ var type = "^-?\\d+$"; var re = new RegExp(type); return re.test(s) } } </script> <style type="text/css"> html,body {padding: 0px;margin: 0px;font-family: "微软雅黑";background: #ccc;} .boxDom { margin: 100px auto; perspective:2000px; width:600px; height: 300px; } .boxDom ul { padding: 0px; position: relative; top: 0px; bottom: 0px; margin: auto; width:600px; height: 300px; list-style:none; font-size: 0px; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; } .boxDom ul li { position: absolute; top: 0px; left: 0px; border:2px solid #fff; } .imgOne { transform:translateZ(150px); -webkit-transform:translateZ(150px); -moz-transform:translateZ(150px); -ms-transform:translateZ(150px); } .imgTwo { transform: translateY(-150px) rotateX(90deg); -webkit-transform: translateY(-150px) rotateX(90deg); -moz-transform: translateY(-150px) rotateX(90deg); -ms-transform: translateY(-150px) rotateX(90deg); } .imgThree { transform: translateZ(-150px) rotateY(180deg); -webkit-transform: translateZ(-150px) rotateY(180deg); -moz-transform: translateZ(-150px) rotateY(180deg); -ms-transform: translateZ(-150px) rotateY(180deg); } .imgfour { transform: translateY(150px) rotateX(270deg); -webkit-transform: translateY(150px) rotateX(270deg); -moz-transform: translateY(150px) rotateX(270deg); -ms-transform: translateY(150px) rotateX(270deg); } .boxDom div { background:rgba(0,0,0,.6); width:80px; height:80px; border-radius: 50%; position: absolute; top: 0px; bottom:0px; margin: auto; text-align: center; font-size: 3em; line-height: 1.5em; color: #fff; cursor: pointer; } .left {left:0px;} .right {right:0px;} </style> </head> <body> <div class="boxDom"> <ul id="ulBox"> <li class="imgOne"><img src="http://img.hoop8.com/attachments/1603/6952062172999.jpg" alt="" /></li> <li class="imgTwo"><img src="http://img.hoop8.com/attachments/1603/7232062172999.jpg" alt="" /></li> <li class="imgThree"><img src="http://img.hoop8.com/attachments/1603/7722062172999.jpg" alt="" /></li> <li class="imgfour"><img src="http://img.hoop8.com/attachments/1603/8132062172999.jpg" alt="" /></li> </ul> <div class="left" id="leftDiv"><</div> <div class="right" id="rightDiv">></div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/zcynine/p/5233302.html
