3D技术轮播

最新推荐文章于 2024-06-15 16:44:22 发布

ivwslyc

最新推荐文章于 2024-06-15 16:44:22 发布

阅读量61

点赞数

分类专栏： html 3D技术文章标签： css3 css html

本文链接：https://blog.csdn.net/Wdeasa/article/details/121979974

版权

html 3D技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

3D技术轮播

html：

我的代码
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D轮播图效果-jq22.com</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        * {
            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.jq22.com/img/cs/500x300-1.png");
            transform-origin:bottom;
            transform:translateZ(180px) rotateX(90deg);
        }
        #solid ul li div:nth-child(2) {
            top:360px;
            background:url("http://www.jq22.com/img/cs/500x300-2.png");
            transform-origin:top;
            transform:translateZ(180px) rotateX(-90deg);
        }
        #solid ul li div:nth-child(3) {
            background:url("http://www.jq22.com/img/cs/500x300-3.png");
            transform:translateZ(180px);
        }
        #solid ul li div:nth-child(4) {
            background:url("http://www.jq22.com/img/cs/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;
        }
    </style>
</head>
<body>
<div id="solid">
    <ul id="oUl"></ul>
    <ol>
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
</div>

<script>
    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 += '<li><div></div><div></div><div></div><div></div></li>';
            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%}';
    }
</script>

</body>
</html>