原生JS简易轮播图+轮播动画（未完成，还在制作中）

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

轮播图原理：以下面的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);
        }
        goPrevious = () => {
            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);
        }
        // jumpPreviousAnimation = (count) => {
        //     let ul = document.querySelector('.play-block');
        //     let timer = 0;
        //     window.setInterval(() => {
        //         let ulleftspace = getComputedStyle(ul, null)["left"]
        //         if (timer <= 60 * count-1) {
        //             timer++;
        //             var newLeft = parseInt(ulleftspace) + 40;
        //             ul.style.left = newLeft + "px";
        //         }
        //     }, 16);
        // }
        // jumpNextAnimation = (count) => {
        //     let ul = document.querySelector('.play-block');
        //     let timer = 0;
        //     window.setInterval(() => {
        //         let ulleftspace = getComputedStyle(ul, null)["left"]
        //         if (timer <= 60*count-1) {
        //             timer++;
        //             var newLeft = parseInt(ulleftspace) - (30/count);
        //             ul.style.left = newLeft + "px";
        //         }
        //     }, 10);
        // }
        goFirstAnimation = () => {
            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) + 30;
                    ul.style.left = newLeft + "px";
                }
            }, 10);
        }

目前实现重点主要是轮播动画效果：

        nextAnimation = () => {
            let ul = document.querySelector('.play-block');
            let timer = 0;//计时器
            window.setInterval(() => {
                let ulleftspace = getComputedStyle(ul, null)["left"]//外联样式无法通过js直接获取，需要通过此种方式获取ul当前的左边距
                if (timer <= 59) {
                    timer++;
                    var newLeft = parseInt(ulleftspace) - 10;
                    ul.style.left = newLeft + "px";//可以通过js直接改变left
                }

            }, 16);//这里设置了一个定时器，每16毫秒执行一次函数，每执行一次函数让计时器+1，一共执行60次，每次让ul向左移动10像素，最后相当于手动写了一个接近60帧的动画，非常流畅
        }

目前的效果是可以实现自动+循环轮播的，但是会有一点小BUG。