3D轮播图

最新推荐文章于 2024-08-26 09:57:43 发布

夏末终秋凉

最新推荐文章于 2024-08-26 09:57:43 发布

阅读量707

点赞数

分类专栏： html css javascript 文章标签： css css3 前端 javascript html

本文链接：https://blog.csdn.net/qq545698514/article/details/53608004

版权

css 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 0 订阅

订阅专栏

之前看了一次公开课，讲的是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.οnmοuseοver=function(){
        clearInterval(timeD);
    }
    contain.οnmοuseοut=function(){
        play();
    }

for(var j=0;j<spanNode.length;j++){
    spanNode[j].sindex=j;
    spanNode[j].οnclick=function(){
        autoPlay(this);
    }
    spanNode[j].οnmοuseοver=function(){
        clearInterval(timeD);
    }
    spanNode[j].οnmοuseοut=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轮播效果