前端学习——记录一次不完美的3D轮播图

3D轮播图

很丑我知道，那是因为里面存着一些小BUG，但是我又搞不定，我就不想去修改了。如果不写这些按钮的话，可以直接用CSS写，很完美，但是我又想写按钮的功能，然后就写的很菜。直接来吧。

HTML部分

<div class="main">
        <ul class="images">
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
        </ul>
        <ul class="points">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <button class="prev" οnclick="prevent()">&lt;</button>
        <button class="next" οnclick="next()">&gt;</button>
    </div>

这个部分不说了。

CSS部分

* {
            margin: 0;
            padding: 0;
        }
        
        body {}
        
        .main {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 100px auto;
            background-color: cornflowerblue;
            perspective: 200000px;
            overflow: hidden;
        }
        
        .images {
            position: relative;
            width: 100%;
            height: 300px;
            transform-style: preserve-3d;
        }
        
        .images:hover {
            animation-play-state: paused;
        }
        /* @keyframes run {
            0%,
            10% {
                transform: rotateY(0deg);
            }
            25%,
            35% {
                transform: rotateY(-90deg);
            }
            50%,
            60% {
                transform: rotateY(-180deg);
            }
            75%,
            85% {
                transform: rotateY(-270deg);
            }
            100% {
                transform: rotateY(-360deg);
            }
        } */
        
        li {
            list-style: none;
        }
        
        .images li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .images li:nth-child(1) {
            transform: rotateY(0deg) translateZ(300px);
        }
        
        .images li:nth-child(2) {
            transform: rotateY(90deg) translateZ(300px);
        }
        
        .images li:nth-child(3) {
            transform: rotateY(180deg) translateZ(300px);
        }
        
        .images li:nth-child(4) {
            transform: rotateY(270deg) translateZ(300px);
        }
        
        .images li img {
            /* position: absolute; */
            width: 100%;
            height: 100%;
        }
        
        .points {
            position: relative;
            margin: 10px 200px;
            z-index: 2;
            width: 200px;
            height: 40px;
            background-color: darkgray;
        }
        
        .points li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            float: left;
            margin: 5px 10px;
            background-color: black;
        }
        
        button {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            /* outline: none; */
            z-index: 2px;
            top: 125px;
            background: none;
            outline-style: none;
            border: none;
            line-height: 50px;
            font-size: 50px;
            color: red;
        }
        
        .prev {
            left: 0;
        }
        
        .next {
            right: 0;
        }
        
        .active {
            background-color: red;
        }

在样式中，先把几张图片变成一个类似立方体的结构，然后就可以在根据Y轴旋转，达到3D的效果。直接用animation和@keyframes完成动画的话会很秀，但是我作死，就不用这个了。

JS部分

var images = document.getElementsByClassName('images')[0];
var points = document.getElementsByClassName('points')[0].children
var index = 0;
var timer = 0;

        function move() {
            for (let i = 0; i < 4; i++) {
                if (index === 5 || index === 4) {
                    points[0].style.backgroundColor = 'red';
                }
                if (i === index) {
                    points[i].style.backgroundColor = 'red';
                } else {
                    points[i].style.backgroundColor = 'black';
                }
            }
            if (index === 0) {
                images.style.transform = 'rotateY(0deg)';
                images.style.transition = "all linear 0s";
                index++;
            } else {
                let angle = index * (-90);
                images.style.transform = 'rotateY(' + angle + 'deg)';
                images.style.transition = "all linear 2s";
                if (index === 5) {
                    index = 1;
                    images.style.transform = 'rotateY(0deg)';
                    images.style.transition = "all linear 0s";
                } else {
                    index++;
                }
            }
            console.log(index);
        }

        function prevent() {
            if (index > 1) {
                clearInterval(timer);
                index -= 2;
                images.style.transform = 'rotateY(' + index * (-90) + 'deg)';
                images.style.transition = "all linear 2s";
                timer = setInterval(move, 3000);
            } else {
                clearInterval(timer);
                index = 4;
                images.style.transform = 'rotateY(' + index * (-90) + 'deg)';
                images.style.transition = "all linear 2s";
                timer = setInterval(move, 3000);
            }

        }

        function next() {
            if (index < 4) {
                clearInterval(timer);
                index += 1;
                images.style.transform = 'rotateY(' + index * (-90) + 'deg)';
                images.style.transition = "all linear 2s";
                timer = setInterval(move, 3000);
            } else {
                clearInterval(timer);
                index = 1;
                images.style.transform = 'rotateY(' + index * (-90) + 'deg)';
                images.style.transition = "all linear 2s";
                timer = setInterval(move, 3000);
            }

        }



        function main() {
            points[0].style.backgroundColor = 'red';
            timer = setInterval(move, 3000);

        }
        main()

存在的BUG

每次到第一张图片的时候，因为定时器的原因，会导致延迟转动，然后变量index的设定应该是不正确的，在加加和减减的部分不准确，导致用户体验不行。然后两个按钮的事件功能，应该本来是加一和减一的，但由于里面的问题，事实不是这样。然后圆点的功能还是不想写了。

最后

虽然这个有很多的问题，但是还是能进行3D变换，小目标还是达到。如果有大佬能把我这个优化，也请带带我。。。