3D技术轮播
html:
我的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D轮播图效果-jq22.com</title>
<script src="../jquery-3.3.1.min.js"></script>
<style>
* {
margin:0;
padding:0
}
li {
list-style:none;
}
#solid {
width:800px;
height:360px;
margin:150px auto 0;
box-shadow:1px 7px 25px #fd8fd9;
perspective:800px;
}
#solid ul {
height:100%;
}
#solid ul li {
/*width:200px;
*/
/*height:360px;
*/
position:relative;
float:left;
box-sizing:border-box;
transform-style:preserve-3d;
/*
1. 给父级 transform-origin:center center -180px;
2. 把每一个li抽出来
*/
-transform-origin:center center -180px;
transform:translateZ(-180px);
}
#solid ul li div {
position:absolute;
width:100%;
height:100%;
/*opacity:0.5;
*/
}
#solid ul li div:nth-child(1) {
top:-360px;
background:url("http://www.jq22.com/img/cs/500x300-1.png");
transform-origin:bottom;
transform:translateZ(180px) rotateX(90deg);
}
#solid ul li div:nth-child(2) {
top:360px;
background:url("http://www.jq22.com/img/cs/500x300-2.png");
transform-origin:top;
transform:translateZ(180px) rotateX(-90deg);
}
#solid ul li div:nth-child(3) {
background:url("http://www.jq22.com/img/cs/500x300-3.png");
transform:translateZ(180px);
}
#solid ul li div:nth-child(4) {
background:url("http://www.jq22.com/img/cs/500x300-4.png");
transform:translateZ(-180px) rotateX(180deg);
}
#solid ul li div:nth-child(5) {
width:360px;
left:-360px;
background:green;
transform-origin:right;
transform:translateZ(180px) rotateY(-90deg);
}
#solid ul li div:nth-child(6) {
width:360px;
left:200px;
background:orange;
transform-origin:left;
transform:translateZ(180px) rotateY(90deg);
}
#solid ul li:nth-child(1) div {
background-position-x:0;
}
#solid ul li:nth-child(2) div {
background-position-x:-200px;
}
#solid ul li:nth-child(3) div {
background-position-x:-400px;
}
#solid ul li:nth-child(4) div {
background-position-x:-600px;
}
/*#solid ul li:nth-child(1) {
transition:1s 0s ease-in-out;
}
#solid ul li:nth-child(2) {
transition:1s 0.4s ease-in-out;
}
#solid ul li:nth-child(3) {
transition:1s 0.8s ease-in-out;
}
#solid ul li:nth-child(4) {
transition:1s 1.2s ease-in-out;
}
*/
/* #solid ul:hover li {
transform:translateZ(-180px) rotateX(90deg);
}
*/
#solid ol {
position:absolute;
left:50%;
bottom:15px;
width:140px;
height:20px;
transform:translateX(-50%);
display:flex;
justify-content:space-around;
}
#solid ol li {
width:20px;
height:20px;
background:black;
box-shadow:0 2px 5px white;
border-radius:50%;
color:white;
text-align:center;
/*斜体 12px大小/20px行高*/
font:italic 12px/20px 'Microsoft Yahei';
cursor:pointer;
}
#solid ol li.on {
background:red;
}
</style>
</head>
<body>
<div id="solid">
<ul id="oUl"></ul>
<ol>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
<script>
var solid = document.getElementById('solid');
var aBtn = document.querySelectorAll('#solid ol li');
var css = document.getElementsByTagName('style')[0];
var timer;
var n = 0;
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
n = this.index;
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
}
this.className = 'on';
css.innerHTML += '#solid ul li{transform: translateZ(-180px) rotateX(' + (n * 90) + 'deg);}';
}
};
solid.onmouseenter = function() {
clearInterval(timer);
};
solid.onmouseleave = function() {
play();
};
play();
function play() {
timer = setInterval(function() {
n++;
n %= 4;
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
}
aBtn[n].className = 'on';
css.innerHTML += '#solid ul li{transform: translateZ(-180px) rotateX(' + (n * 90) + 'deg);}';
}, 4000);
}
len(100);
function len(num) {
var width = 800 / num; // 每个li的宽度
var uHTML = '';
var pHTML = '';
var zHTML = '';
var tHTML = '';
var z = 0;
for (var i = 0; i < num; i++) {
if (i >= num / 2) {
z--;
zHTML += '#solid ul li:nth-child(' + (i + 1) + '){ z-index: ' + z + '}';
}
uHTML += '<li><div></div><div></div><div></div><div></div></li>';
pHTML += '#solid ul li:nth-child(' + (i + 1) + ') div{background-position-x: ' + (-i * width) + 'px;}';
tHTML += '#solid ul li:nth-child(' + (i + 1) + '){transition: 0.8s ' + (0.3 * i / num) + 's}';
}
oUl.innerHTML = uHTML;
css.innerHTML += pHTML + zHTML + tHTML + '#solid ul li,#box ul li div{width:' + width + 'px;height:100%}';
}
</script>
</body>
</html>
希望我的代码对大家有用。