3D轮播图案例总结

思路：

先搭出一个长方体，然后把这个长长方体切割成很多个li，然后每个li都有四个面（用div表示），然后利用background-position-x

属性将图片平移不同的距离从而拼凑成一张完整的图片，然后将每个li的旋转时间都设定成不同的额，就形成了波浪翻转的效果

1.document.querySelectorAll()

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

2.window.getComputedStyle

getComputedStyle() 方法用于获取指定元素的 CSS 样式。

获取的样式是元素在浏览器中最终渲染效果的样式。

语法

window.getComputedStyle(element, pseudoElement)

参数说明：

element: 必需，要获取样式的元素。
pseudoElement: 可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。

3.transform-origin

这个是表示旋转的旋转点，关于这个有一篇挺好的文章可以看一下：transform-origin

代码：

<!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>
</head>
<style>
    * {
        margin: 0px;
        padding: 0;
        box-sizing: border-box;

    }

    li {
        list-style: none;
    }

    .solid {
        width: 800px;
        height: 360px;
        margin: 150px auto;
        box-shadow: 1px 7px 25px #fd8fd9;
    }

    .solid ul {
        height: 100%;
        z-index: 1;
    }

    .solid ul li {
        position: relative;
        float: left;
        transform-style: preserve-3d;
        width: 8px;
        height: 100%;
    }

    .solid ul li div {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .solid ul li div:nth-child(1) {
        background: url('./image/1.jpg');
        transform:rotateX(90deg) translateZ(180px) ;
    }

    .solid ul li div:nth-child(2) {
        background: url('./image/2.jpg');
        transform:  rotateX(-90deg) translateZ(180px);
    }

    .solid ul li div:nth-child(3) {
        background: url('./image/3.jpg');
        transform: translateZ(180px);
    }

    .solid ul li div:nth-child(4) {
        background: url('./image/4.jpg');
        transform: translateZ(-180px) rotateX(180deg);
    }
    .solid ol{
        z-index: 9999;
        margin:5px auto;
        width: 50%;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        height: 50px;
    }
    .solid ol li{
        float: left;
        width: 25px;
        height: 25px;
        background-color: gray;
        text-align: center;
        border-radius: 50%;
    }
    .solid ol li:hover{
        cursor: pointer;
        box-shadow: 2px 2px 5px;
    }
    .solid ol li.on{
        background-color: red;
    }
</style>

<body>
    <div class="solid">
        <ul class="oUl">
        </ul>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
</body>
<script src="demo.js"></script>

</html>

//创建元素
var solid = document.getElementsByClassName("solid")[0];
var oUl = document.getElementsByClassName("oUl")[0];
var css = document.getElementsByTagName("style")[0];
var n;
var btn = document.querySelectorAll('ol li');//选择
createDom();
function createDom() {
    var len = 100;//创建100个li
    var uHtml = "";
    var pHtml = "", tHtml = "";
    var allWidth = parseInt(window.getComputedStyle(solid, null).width);//计算总的宽度
    var widthLi = allWidth / len;
    for (var i = 0; i < len; i++) {
        uHtml += "<li><div></div><div></div><div></div><div></div></li>";
        pHtml += '.solid ul li:nth-child(' + (i + 1) + ') div{background-position-x:' + (-i * widthLi) + 'px;background-size: cover;}';
        tHtml+='.solid ul li:nth-child(' + (i + 1) + '){transition:'+(0.8+0.3*i/len)+'s;}';
    }
    oUl.innerHTML = uHtml;
    css.innerHTML += pHtml;
    css.innerHTML+=tHtml;
    bindEvent();
    play();
}
function bindEvent() {
    for (var i = 0; i < 4; i++) {
        btn[i].index = i;
        btn[i].onclick = function () {
            n = this.index;
            for (var i = 0; i < 4; i++) {//x先将所有序号的class清空
                btn[i].className = '';
            }
            this.className = 'on';
            css.innerHTML += '.solid ul li{transform:rotateX(' + n * 90 + 'deg)}';
        }
    }
}

3D轮播图案例总结

语法

猜你喜欢