3D轮播图

来源：互联网发布：剑三温婉成女捏脸数据编辑：程序博客网时间：2024/06/04 00:39

之前看了一次公开课，讲的是3d轮播图，效果挺酷炫的。很早之前手写的，现在代码奉上：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>轮播</title>    <style id="style">        *{            margin:0;            padding:0;        }        .wrap{            width:1050px;            height: 300px;            perspective: 1000px;            -webkit-perspective: 1000px;            margin:50px auto 0px;            position:relative;        }        .contain{            width:100%;            height: 100%;        }        ul{            backface-visibility: hidden;            width:30px;            height: 300px;            position:relative;            float:left;            list-style:none;            transform-style:preserve-3d;            -webkit-transform-origin:center center -150px;            -moz-transform-origin:center center -150px;            -ms-transform-origin:center center -150px;            -o-transform-origin:center center -150px;            transform-origin:center center -150px;            /*transform:rotateX(90deg) rotateY(0deg);*/        }        li{            width:100%;            height: 100%;            position:absolute;            font-size:40px;            display:block;        }        ul li:nth-of-type(1){            /*background-color: #666;*/            background-image:url('image/1.jpg');            z-index:4;            left:0;            top:0;        }        ul li:nth-of-type(2){            /*z-index:3;*/            background-image:url('image/2.jpg');            top:-100%;            left:0;            -webkit-transform-origin:bottom;            -moz-transform-origin:bottom;            -ms-transform-origin:bottom;            -o-transform-origin:bottom;            transform-origin:bottom;            -webkit-transform: rotateX(90deg);            -moz-transform: rotateX(90deg);            -ms-transform: rotateX(90deg);            -o-transform: rotateX(90deg);            transform: rotateX(90deg);        }        ul li:nth-of-type(3){            /*z-index:2;*/            /*background-color: #0f0;*/            left:0;            top:0;            background-image:url('image/3.jpg');            -webkit-transform: translateZ(-300px) rotateX(180deg);            -moz-transform: translateZ(-300px) rotateX(180deg);            -ms-transform: translateZ(-300px) rotateX(180deg);            -o-transform: translateZ(-300px) rotateX(180deg);            transform: translateZ(-300px) rotateX(180deg);        }        ul li:nth-of-type(4){            /*z-index:1;*/            /*background-color: #00f;*/            background-image:url('image/4.jpg');            bottom:-100%;            left:0;            -webkit-transform-origin:top;            -moz-transform-origin:top;            -ms-transform-origin:top;            -o-transform-origin:top;            transform-origin:top;            -webkit-transform: rotateX(-90deg);            -moz-transform: rotateX(-90deg);            -ms-transform: rotateX(-90deg);            -o-transform: rotateX(-90deg);            transform: rotateX(-90deg);        }        /*ul a:nth-of-type(1){*/            /*height:300px;*/            /*width:300px;*/            /*display:block;*/            /*position:absolute;*/            /*left:-300px;*/            /*top:0;*/            /*background-color: red;*/            /*background:url("image/flash1.png");*/            /*transform-origin:right;*/            /*-webkit-transform: rotateY(-90deg);*/            /*-moz-transform: rotateY(-90deg);*/            /*-ms-transform: rotateY(-90deg);*/            /*-o-transform: rotateY(-90deg);*/            /*transform: rotateY(-90deg);*/        /*}*/        /*ul:nth-of-type(1) a:last-child{*/            /*height:300px;*/            /*width:300px;*/            /*display:block;*/            /*position:absolute;*/            /*right:-300px;*/            /*top:0;*/            /*background:url("image/flash1.png");*/            /*background-color: #666;*/            /*-webkit-transform-origin:left;*/            /*-moz-transform-origin:left;*/            /*-ms-transform-origin:left;*/            /*-o-transform-origin:left;*/            /*transform-origin:left;*/            /*-webkit-transform: rotateY(90deg);*/            /*-moz-transform: rotateY(90deg);*/            /*-ms-transform: rotateY(90deg);*/            /*-o-transform: rotateY(90deg);*/            /*transform: rotateY(90deg);*/        /*}*/        div.nav{            height:20px;            width:100%;            position:absolute;            left:0;            bottom:10px;            /*background-color: red;*/            text-align:center;            z-index:100;        }        span{            display:inline-block;            line-height:20px;            width:20px;            border-radius:50%;            background-color:#666;            margin-right:10px;            color:white;            font-size:12px;            cursor:pointer;        }        span.active{            background-color: gold;        }    </style></head><body>    <div class="wrap">        <div class="contain" id="contain">        </div>        <div class="nav" id="nav">            <span class="active">1</span><span>2</span><span>3</span><span>4</span>    </div>    </div>    <script src="js/banner.js"></script></body></html>

var cont=document.getElementById("contain");var style=document.getElementById("style");var nav=document.getElementById("nav");var spanNode=nav.getElementsByTagName("span");var num=1050/30;var zIndex=0;for(var i=0;i<num;i++){    i>num/2?zIndex--:zIndex++;    cont.innerHTML+="<ul><li></li><li></li><li></li><li></li></ul>";    style.innerHTML+='#contain ul:nth-of-type('+(i+1)+') '+'li'+'{background-position:'+(-30*i)+'px 0px}';    style.innerHTML+='#contain ul:nth-child('+(i+1)+')'+'{z-index:'+zIndex+'}';}var oUl=cont.getElementsByTagName("ul");var sindex=0;    contain.onmouseover=function(){        clearInterval(timeD);    }    contain.onmouseout=function(){        play();    }for(var j=0;j<spanNode.length;j++){    spanNode[j].sindex=j;    spanNode[j].onclick=function(){        autoPlay(this);    }    spanNode[j].onmouseover=function(){        clearInterval(timeD);    }    spanNode[j].onmouseout=function(){        play();    }}var colums=0;var timeD;function play(){    clearInterval(timeD);    timeD=setInterval(function(){        colums++;        if(colums>=4){            colums=0;        }        autoPlay(spanNode[colums]);    },3000);}play();function autoPlay(that){    for(var j=0;j<spanNode.length;j++){        spanNode[j].className='';    }    var sindex1=that.sindex;    that.className="active";    for(var m=0;m<oUl.length;m++){        // alert(90*sindex1);        oUl[m].style.transform="rotateX("+(sindex1*90)+"deg)";        oUl[m].style.transition="all 0.8s "+60*m+"ms";    }}

链接：3d轮播效果
                                                     0        0           	
					
					   3D轮播图
	  	   3D轮播图
	  	   3d切割轮播图
	  	   3D轮播图
	  	   ViewPagerTransformer实现3d轮播图
	  	   %03d、%3d、%-3d规则
	  	   3D、4D、5D区别？
	  	   3D
	  	   3d
	  	   3d
	  	   3D
	  	   3D
	  	   3d
	  	   3d
	  	   3d
	  	   3D
	  	   3D
	  	   3D
	     		  
	  	   ps
	  	   自定义TextView跑马灯效果可控制启动/停止/速度/焦点
	  	   时间时区处理问题
	  	   微信小程序之『自定义toast』
	  	   Android菜鸟练习第十七课 MD5加密
	  	   3D轮播图
	  	   lcx端口转发工具的使用
	  	   生成对应的二维码下载app
	  	   android中的Handler和Callback机制
	  	   android自定义异常，并重启应用
	  	   Android 获取app的版本
	  	   80386内存寻址机制(个人见解)
	  	   Linux 计划任务 Cron
	  	   MD5 加密登录用户名称和密码