3D轮播图
实现5个图片自动播放，以及点击图片将其展现在正中央。
源代码获取：
https://github.com/akh5/web/tree/master/3D%E8%BD%AE%E6%92%AD%E5%9B%BE
HTML只提供了背景容器，用于放置5张图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D轮播图</title>
<link href="wrapper.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<img class="image" src="imag/1.jpg">
<img class="image" src="imag/2.jpeg">
<img class="image" src="imag/3.jpeg">
<img class="image" src="imag/4.jpeg">
<img class="image" src="imag/5.jpeg">
</div>
<script src="wrapper.js"></script>
</body>
</html>
CSS
html,body{
margin: 0;
padding: 0;
}
.image{
float: left;
width: 300px;
height: 200px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 8px;
transition: transform 1s ease-in-out;
}
.wrapper{
position: absolute;
width: 100%;
height: 100%;
background-color: black;
perspective: 800px;
transform-style: preserve-3d;
}
css中主要用到的是transform-style属性来实现3d效果
JS
var imgs = document.getElementsByTagName("img");
var len = imgs.length;
var current = 0;
var timer;
function wrapper() {
frount();
bind();
autoplay();
};
wrapper();
function frount() {
var mlen = Math.floor(len/2);
var limg , rimg;
for(var i=0;i<mlen;i++){
limg = len+current-i-1;
rimg = current+i+1;
if(limg>=len){
limg -= len;
}
if(rimg>=len){
rimg -= len;
}
imgs[limg].style.transform= `translateX(`+(-150)*(i+1)+`px) translateZ(`+(200-i*100)+`px) rotateY(30deg)`;
imgs[rimg].style.transform = `translateX(`+(150)*(i+1)+`px) translateZ(`+(200-i*100)+`px) rotateY(-30deg)`;
}
imgs[current].style.transform = `translateZ(300px)`;
};
function bind() {
for(var i=0 ;i<len;i++){
(function (i) {
imgs[i].onclick=function () {
current = i;
frount();
}
})(i);
imgs[i].onmouseenter=function () {
clearInterval(timer);
}
imgs[i].onmouseout = function () {
autoplay();
}
}
};
function autoplay() {
timer = setInterval(function () {
if(current>=len-1){
current=0;
}else {
current++;
}
frount();
},2000)
}
JS中主要难点是寻找5个图片中的中间位置以及左右两侧的下标，并改变其translate样式
