效果见图
3D旋转.gif
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>3D轮播</title>
</head>
<style>
*{margin:0px;padding:0px;}
li{list-style-type:none;}
.wrap{width:800px;margin:300px auto;position:relative;-webkit-perspective: 800px;}
#picall{width:800px;height:360px;}
/*创建3D空间必须写定位*/
#picall li{position:relative;width:50px;height:360px;-webkit-transform-style: preserve-3d;float:left;-webkit-transform-origin: center center -180px;}
#picall li a{position:absolute;width:50px;height:360px;display: block;}
#picall li a:nth-of-type(1){background:url(images/2.jpg) no-repeat;top:0px;left:0px; }
#picall li a:nth-of-type(2){background:url(images/1.jpg) no-repeat;top:-360px;left:0px;-webkit-transform-origin:bottom;-webkit-transform: rotateX(90deg); }
#picall li a:nth-of-type(3){background:url(images/3.jpg) no-repeat;top:0px;left:0px;-webkit-transform: translateZ(-360px) rotateX(180deg); }
#picall li a:nth-of-type(4){background:url(images/4.jpg) no-repeat;top:360px;left:0px;-webkit-transform-origin:top;-webkit-transform: rotateX(-90deg); }
#picall li span{position:absolute;left:0px;top:0px;width:360px;height:360px;-webkit-transform-origin: left;}
#picall li span:nth-of-type(1){-webkit-transform: rotateY(90deg);background:rgba(20,20,20,0.4);}
#picall li span:nth-of-type(2){-webkit-transform: rotateY(90deg);left:50px;background:rgba(25,20,20,0.4);}
#btn{padding:10px auto;position:absolute;right:0px;bottom:0px;z-index:999;}
#btn li{width:50px;height:50px;background:black;border-radius: 50%;font:24px/50px "微软雅黑";float:left;margin: 0px 10px;color:#ffffff;text-align:center;}
#btn li.active{background:white;color:black;}
</style>
<body>
<div class="wrap">
<ul id="picall">
</ul>
<ol id="btn">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
<script>
var box = document.getElementsByClassName("wrap")[0];
var Aul = document.getElementById("picall");
var btnall = document.getElementById("btn");
Rotate(box,Aul,btnall);
function Rotate(x,y,z)
{
var width = 50;
var length = Math.floor(box.clientWidth/width);
var Liall = "";
var index = 0 ;
var old = 0 ;
var flag = true;
var liindex = 0 ;
/*创建节点*/
function CreateNode(){
for(var i=0;i<length;i++)
{
Liall +='<li><a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <span></span> <span></span> </li>';
}
Aul.innerHTML = Liall;
}
CreateNode();
/*创建节点结束*/
/*消除多余背景*/
function clear(){
for(var i=0;i<length;i++)
{
i>length/2?--index:++index;
Aul.getElementsByTagName("li")[i].style.zIndex = index;
}
}
clear();
/*消除背景结束*/
/*插入背景*/
function bg()
{
for(var i=0;i<length;i++)
{
for(var n=0;n<4;n++)
{
Aul.getElementsByTagName("li")[i].getElementsByTagName("a")[n].style["backgroundPosition"] = -width*i+"px 0px";
}
}
}
bg();
/*插入背景结束*/
/*点击事件*/
function clickfn(){
if(flag)
{
flag = false;
clearInterval(timer);
for(var i=0;i<length;i++)
{
Aul.children[i].style.transition = "0.4s "+i*100+"ms";
Aul.children[i].style.WebkitTransform = "rotateX("+this.index*90+"deg)"
}
btnall.children[this.index].className = "active";
btnall.children[old].className = " ";
old = this.index;
liindex = this.index;
flag = true;
}
}
/*点击事件结束*/
for(var i=0;i<4;i++)
{
btnall.children[i].index = i ;
btnall.children[i].onclick = clickfn;
}
/*自动化事件*/
function auto(){
if(liindex>=3)
{
liindex = -1 ;
}
if(flag)
{
++liindex;
flag = false;
for(var i=0;i<length;i++)
{
Aul.children[i].style.transition = "0.4s "+i*100+"ms";
Aul.children[i].style.WebkitTransform = "rotateX("+liindex*90+"deg)"
}
btnall.children[liindex].className = "active";
btnall.children[old].className = " ";
old = liindex;
flag = true;
}
}
/*自动化事件结束*/
var timer = null;
timer = setInterval(auto,3000);
/*自动化事件结束*/
box.onmouseover = function(){
clearInterval(timer);
}
box.onmouseleave = function(){
timer = setInterval(auto,3000);
}
window.onblur = function(){
clearInterval(timer);
}
window.onfocus = function(){
timer = setInterval(auto,3000);
}
}
</script>
</html>
