3D轮播图
- 时间：2019年9月19号
- 类型：js和动画
- 人员：魏欣怡
本案例素材联系魏欣怡或下载
效果图
案例说明
实现动态3d效果的轮播图
案例代码
第一步：实现布局效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrapper" id="wrap">
<img src="./images/1.png" alt="">
<img src="./images/2.png" alt="">
<img src="./images/3.png" alt="">
<img src="./images/4.png" alt="">
<img src="./images/5.png" alt="">
</div>
<script src="./js/index.js"></script>
</body>
</html>
第二步：布局的样式
* {
margin:0;
padding:0;
}
html,body {
width:100%;
height:100%;
}
.wrapper {
position: relative;
width:100%;
height:100%;
background-color:#333;
perspective: 800px;
transform-style: preserve-3d;
}
.wrapper img {
position: absolute;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
width:300px;
height:200px;
border-radius: 8px;
/* transition property duration timing-function delay */
transition: transform 0.5s ease-in-out;
}
第三步：实现js
var oImg = document.getElementsByTagName('img');
// 默认中间展示索引值为0的这张图片
var index = 0;
// 获得图片个数
var len = oImg.length;
var timer;
function init() {
show();
bindEvent();
play();
}
init();
function show() {
// 获得中间图片,索引从0开始所以向下取整
var mLen = Math.floor(len / 2);
// rNum,lNum分别是分散在中间图片左右左右两侧的图片索引
var rNum, lNum;
for (var i = 0; i < mLen; i++) {
//5+0-0-1=4
//5+0-1-1=3
lNum = len + index - i - 1;
//判断范围
if (lNum > len - 1) {
//因为当我点击索引为4的图片是这里的index就会出现问题
lNum -= len;
}
// 分别让分散在左右两侧的图片平移旋转
//图片的索引越大离的越远，z轴越小看起来也越小
oImg[lNum].style.transform = 'translateX(' + (-150 * (i + 1)) + 'px) translateZ(' + (200 - i * 100) + 'px) rotateY(30deg)';
//0+0+1=1
//0+1+1=2
rNum = index + i + 1;
if (rNum > len - 1) {
rNum -= len;
// rNum%=len
}
oImg[rNum].style.transform = 'translateX(' + (150 * (i + 1)) + 'px) translateZ(' + (200 - i * 100) + 'px) rotateY(-30deg)';
}
// 当前显示图片直接z轴向前移动
oImg[index].style.transform = 'translateZ(300px)';
}
function bindEvent() {
//第一种
// for (var i = 0; i < len; i++) {
// // 在每一张图片上绑定上点击事件
// // 利用立即执行函数清除闭包
// (function (i) {
// oImg[i].onclick = function () {
// // 改变当前显示图片索引
// index = i;
// show();
// };
// // 鼠标覆盖 清除自动轮播定时器
// oImg[i].onmouseenter = function () {
// clearInterval(timer);
// };
// // 鼠标移走 继续轮播
// oImg[i].onmouseleave = function () {
// play();
// };
// })(i);
// }
// 第二种,let块级作用域
for (let i = 0; i < len; i++) {
oImg[i].onclick = function () {
index = i;
show();
};
oImg[i].onmouseenter = function () {
clearInterval(timer);
};
oImg[i].onmouseleave = function () {
play();
};
}
}
// 自动播放
function play() {
timer = setInterval(function () {
//判断索引
if (index == len - 1) {
index = 0;
} else {
index++;
}
show();
}, 2000);
}