您的位置：首页 > Web前端 > HTML

3D-立体旋转轮播

2017-06-18 21:59 148 查看

立体旋转轮播

通过腾讯公开课学习的轮播效果，下面是效果图。





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

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.jp
4000
g");
}

#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)}";
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 特效
相关文章推荐
新的分享
章节导航