html3d轮播效果,炫酷3D轮播图效果

HtmlCssJs

1

2

3

4

* {

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.sucainiu.com/themes/images/demo/500x300-1.png");

transform-origin:bottom;

transform:translateZ(180px) rotateX(90deg);

}

#solid ul li div:nth-child(2) {

top:360px;

background:url("http://www.sucainiu.com/themes/images/demo/500x300-2.png");

transform-origin:top;

transform:translateZ(180px) rotateX(-90deg);

}

#solid ul li div:nth-child(3) {

background:url("http://www.sucainiu.com/themes/images/demo/500x300-3.png");

transform:translateZ(180px);

}

#solid ul li div:nth-child(4) {

background:url("http://www.sucainiu.com/themes/images/demo/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;

}

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 += '

';

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%}';

}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3