3D-立体旋转轮播

来源：互联网发布：淘宝客服月度工作总结编辑：程序博客网时间：2024/04/28 15:47

立体旋转轮播

通过腾讯公开课学习的轮播效果，下面是效果图。
这里写图片描述

这里写图片描述

以下是实现此特效的具体代码：

HTML代码：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>3D-立体旋转轮播</title></head><body>    <div id="banner">        <ul>        </ul>        <ol>            <li class="curr"></li>            <li></li>            <li></li>            <li></li>        </ol>    </div></body></html>

CSS代码：

* {margin: 0;    padding: 0;}li {    list-style: none;}#banner {    width: 800px;    height: 360px;    margin: 150px auto;    /*加阴影*/    box-shadow: 0 0 10px #c06;    perspective: 800px;}#banner ul {    height: 360px;}/*每个小li就是一个立方体*/#banner ul li {    height: 360px;    position: relative;    transform-style: preserve-3d;    float: left;    transform-origin: 50% 50% -180px;    /*transition: 1s;加上的话，则整体一起旋转。需单独每个div设置延迟时间*/}#banner ul li div {    position: absolute;    width: 100%;    height: 100%;}#banner ul li div:nth-child(1) {/*上*/    top: -360px;    transform-origin: bottom;    transform: rotateX(90deg);    background-image: url("images/1.jpg");}#banner ul li div:nth-child(2) {/*下*/    top: 360px;    transform-origin: top;    transform: rotateX(-90deg);    background-image: url("images/2.jpg");}#banner ul li div:nth-child(3) {/*前*/    background-image: url("images/3.jpg");}#banner ul li div:nth-child(4) {/*后*/    background-image: url("images/4.jpg");    transform: translateZ(-360px) rotateX(-180deg);}ol li {    width: 40px;    height: 40px;    background: #ccc;    border-radius: 50%;    float: left;    margin: 10px;}ol li.curr {    background-color: red;}

JS代码：

var oUl = document.getElementsByTagName("ul")[0];var oOl = document.getElementsByTagName("ol")[0];var oCss = document.getElementById("css");var aLi = oOl.getElementsByTagName("li");var sum = 10;var w = 800 / sum;var html = '', css = '', lazy = '', z = 0, zIndex = '';for(var i = 0; i < 10; i++) {    html += "<li style=width:"+w+"px><div></div><div></div><div></div><div></div></li>";    if(i > sum / 2) {        z--;        zIndex += "#banner ul li:nth-child("+(i+1)+"){z-index:"+z+"}";    }    css += "#banner ul li:nth-child("+(i+1)+") div{background-position:"+i*-w+"px}";    lazy += "#banner ul li:nth-child("+(i+1)+"){transition:1s "+i*0.1+"s}";}oUl.innerHTML = html;oCss.innerHTML += css + lazy + zIndex;for(var i = 0; i < aLi.length; i++) {    aLi[i].index = i;    aLi[i].onclick = function () {        for(var j = 0; j < aLi.length; j++){            aLi[j].className = '';        }        this.className = "curr";        oCss.innerHTML += "#banner ul li{transform:rotateX("+this.index*-90+"deg)}";    }}

阅读全文

0 0