<!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>
时间： 2024-10-03 23:07:44