原生JS简易轮播图+轮播动画

已知BUG：切换到最后一张图时点击previous按钮，会导致切换到倒数第二张后触发切换到第一张的函数，进而造成多向左移动一张图片的距离。

跳转有bug，不可用

轮播图原理：以下面的html代码为例：外面先写一个“窗口”作为显示当前轮播图片的地方，设置overflow使其他的轮播图隐藏；然后写一个装轮播图的容器，使它绝对定位到“窗口中”，里面的轮播图设置左浮动使它们显示在同一行；随后轮播图改变时，只需要改变容器的left改变其位置，便能实现轮播切换的效果。

先贴代码：

html部分：

<div class="show-window">
        <ul class="play-block">
            <li class="play-el" data-index="1" style="background-color: tomato;"></li>
            <li class="play-el" data-index="2" style="background-color: red;"></li>
            <li class="play-el" data-index="3" style="background-color: aquamarine;"></li>
            <li class="play-el" data-index="4" style="background-color: #000;"></li>
        </ul>
    </div>
    <button type="primary" onclick="goNext()">next</button>
    <button type="primary" onclick="goPrevious()">previous</button>

四个轮播图，两个按钮后续优化；

css部分：

        html {
            padding: 0;
            margin: 0;
        }

        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .show-window {
            position: relative;
            width: 600px;
            height: 250px;
            overflow: hidden;
        }

        .play-block {
            position: absolute;
            left: 0;
            top: 0;
            width: 200vw;
        }

        .play-el {
            float: left;
            width: 600px;
            min-width: 600px;
            height: 250px;
        }

js部分：

        window.setInterval(() => {
            autoPlay();
        }, 5000);
        autoPlay = () => {
            goNext();
        }

        goNext = () => {
            let ul = document.querySelector('.play-block');
            let items = document.querySelectorAll('.play-el');
            let ulleftspace = getComputedStyle(ul, null)["left"]
            console.log(ulleftspace);
            if ((Math.abs(parseInt(ulleftspace)) / 600) <= 2) {
                nextAnimation();
            } else {
                goFirstAnimation();
            }
        }
        nextAnimation = () => {
            let ul = document.querySelector('.play-block');
            let timer = 0;
            window.setInterval(() => {
                let ulleftspace = getComputedStyle(ul, null)["left"]
                if (timer <= 59) {
                    timer++;
                    var newLeft = parseInt(ulleftspace) - 10;
                    ul.style.left = newLeft + "px";
                }

            }, 16);
        }