轮播图3d-杨标的博客

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);
}

目录CONTENT

轮播图3d

3D轮播图

效果图

案例说明

案例代码

评论区