愛(ài)折騰，求助？！
?function?next(){
????????????????var?curPage=document.getElementById("page"+curIndex);
????????????????curPage.style.webkitTransform="rotateX(-90deg)";
????????????????curIndex++;
????????????????var?nextPage?=?document.getElementById("page"+curIndex);
????????????????nextPage.style.webkitTransform="rotateX(0deg)";
????????}折騰了一個(gè)下午了，還是不行。如果我想實(shí)現(xiàn)點(diǎn)擊next可以一直從頁(yè)碼6循環(huán)到頁(yè)碼1怎么寫(xiě)代碼呢？
2015-12-21
<html> ? ?
<head> ? ?
<title></title> ? ?
<style> ? ?
#my3dspace{ ? ?
-webkit-perspective: 800; ? ?
-webkit-perspective-origin: 50% 50%; ? ?
overflow:hidden; ? ?
} ? ?
#pagegroup{ ? ?
width:400px; ? ?
height:400px; ? ?
margin:0 auto; ? ?
-webkit-transform-style:preserve-3d; ? ?
position: relative; ? ?
} ? ?
.page{ ? ?
width:360px; ? ?
height:360px; ? ?
padding:20px; ? ?
background-color: black; ? ?
color:white; ? ?
font-weight:bold; ? ?
font-size:360px; ? ?
line-height:360px; ? ?
text-align:center; ? ?
position:absolute; ? ?
} ? ?
#page1{ ? ?
-webkit-transform-origin:bottom; ? ?
-webkit-transition: -webkit-transform 1s linear; ? ?
} ? ?
#page2,#page3,#page4,#page5,#page6{ ? ?
-webkit-transform-origin:bottom; ? ?
-webkit-transition: -webkit-transform 1s linear; ? ?
-webkit-transform: rotateX(90deg); ? ?
} ? ?
#op{ ? ?
text-align:center; ? ?
margin: 40px auto; ? ?
} ? ?
</style> ? ?
<script type="text/javascript"> ? ?
var curIndex = 1; ? ?
function next(){ ? ?
if( curIndex == 6 ) ? ?
return; ? ?
var curPage = document.getElementById("page"+curIndex); ? ?
curPage.style.webkitTransform = "rotateX(-90deg)"; ? ?
curIndex ++; ? ?
var nextPage = document.getElementById("page"+curIndex); ? ?
nextPage.style.webkitTransform = "rotateX(0deg)"; ? ?
} ? ?
function prev(){ ? ?
if( curIndex == 1 ) ? ?
return; ? ?
var curPage = document.getElementById("page"+curIndex); ? ?
curPage.style.webkitTransform = "rotateX(90deg)"; ? ?
curIndex --; ? ?
var prevPage = document.getElementById("page"+curIndex); ? ?
prevPage.style.webkitTransform = "rotateX(0deg)"; ? ?
} ? ?
</script> ? ?
</head> ? ?
<body> ? ?
<div id="my3dspace"> ? ?
<div id="pagegroup"> ? ?
<div class="page" id="page1">1</div> ? ?
<div class="page" id="page2">2</div> ? ?
<div class="page" id="page3">3</div> ? ?
<div class="page" id="page4">4</div> ? ?
<div class="page" id="page5">5</div> ? ?
<div class="page" id="page6">6</div> ? ?
</div> ? ?
</div> ? ?
<div id="op"> ? ?
<a href="javascript:next()">next</a> <a href="javascript:prev()">previous</a> ? ?
</div> ? ?
</body> ? ?
</html> ? ?