原生js实现无缝轮播图

（1）html布局：

<div id="rotation">
        <ol id="dot">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>

        </ol>
        <ul id="rotateFather">
            <li><img src="./jQuery.无缝滑动轮播图封装/imgs/4.png" alt=""></li>
            <li><img src="./jQuery.无缝滑动轮播图封装/imgs/1.png" alt=""></li>
            <li><img src="./jQuery.无缝滑动轮播图封装/imgs/2.png" alt=""></li>
            <li><img src="./jQuery.无缝滑动轮播图封装/imgs/3.png" alt=""></li>
            <li><img src="./jQuery.无缝滑动轮播图封装/imgs/4.png" alt=""></li>
            <li><img src="./jQuery.无缝滑动轮播图封装/imgs/1.png" alt=""></li>
        </ul>

        <button class="leftBtn">&lt;</button>
        <button class="rightBtn" onclick="">&gt;</button>
    </div>

（2）css部分：

    * {
            padding: 0;
            margin: 0;
        }

        div {
            margin: auto;
            position: relative;
            width: 600px;
            height: 450px;
            overflow: hidden;
        }

        ul {
            width: 4800px;
            height: 450px;
            position: absolute;
            left: -600px;
        }

        li {
            float: left;
            width: 600px;
            height: 450px;
        }

        button {
            width: 30px;
            height: 60px;
        }

        button:nth-of-type(2) {
            position: absolute;
            top: 220px;
            left: 560px;
        }

        button:nth-of-type(1) {
            position: absolute;
            top: 200px;
        }

        ol {
            position: absolute;
            top: 350px;
            left: 250px;
            z-index: 2;
        }

        ol li {
            float: left;
            margin-right: 10px;
            list-style: none;
            width: 25px;
            height: 25px;
            background-color: black;
            border-radius: 25px;
            color: white;
            text-align: center;
            line-height: 25px;

            transform: translateX();
            transition: all .5s linear;
        }

（3）js部分：

    var rotation = document.getElementById("rotation")//外层父div
        var rotateFather = document.getElementById("rotateFather");//轮播图片的div
        var lis = rotateFather.children;//轮播图片的每个小li
        var oli = document.getElementById("dot").children;//下面颜色的小li
        var rightBtn = document.getElementsByClassName("rightBtn")[0];//右按钮
        var leftBtn = document.getElementsByClassName("leftBtn")[0];//左按钮
        var index = 0;//颜色小li的index
        var n = 0;//点击次数

        oli[index].style.backgroundColor = "red"
        function clearColor() { //clearColor函数清除小li的颜色
            for (let i = 0; i < oli.length; i++) {
                oli[index].style.backgroundColor = null
            }
        }
        rightBtn.onclick = function () {//右边点击
            clearColor()
            index++
            if (index > 3) {
                index = 0
            }
            oli[index].style.backgroundColor = "red"

            n++
            rotateFather.style.transform = `translateX(${n * -600}px)`
            rotateFather.style.transition = `all .5s linear`
            setTimeout(() => {
                if (n>=4) {
                    n = 0
                    rotateFather.style.transform = `translateX(0px)`
                    rotateFather.style.transition = `all 0s linear`
                }
            },500)//这里的时间要对应 rotateFather.style.transition = `all .5s linear`里面的时间
        }
        leftBtn.onclick = function () { //左边点击
            clearColor()
            index--
            if (index < 0) {
                index = 3
            }
            oli[index].style.backgroundColor = "red"

            n--
            rotateFather.style.transform = `translateX(${n * -600}px)`
            rotateFather.style.transition = `all .5s linear`
            setTimeout(() => {
                if (n <=-1) {
                    n = 3
                    rotateFather.style.transform = `translateX(${n * -600}px)`
                    rotateFather.style.transition = `all 0s linear`
                }
            }, 500)

        }
        let timer = setInterval(function () { //右边点击放定时器里面,每1000点击一次
            rightBtn.click()
        }, 1000)

        rotation.onmouseenter = function () {//进入轮播停止定时器
            clearInterval(timer)
        }
        rotation.onmouseleave = function () {//离开轮播开启定时器
            timer = setInterval(function () {
                rightBtn.click()
            }, 1000)
        }
        for (let i = 0; i < oli.length; i++) {//移动下面的小li,显示对应的图片和对应的小li变色
            oli[i].onmouseenter = function () {
                clearColor()
                index = i
                oli[index].style.backgroundColor = "red"
                n = index
                rotateFather.style.transform = `translateX(${n * -600}px)`
                rotateFather.style.transition = `all .5s linear`
                setTimeout(() => {
                    if (n >=4) {
                        n = 0
                        rotateFather.style.transform = `translateX(0px)`
                        rotateFather.style.transition = `all 0s linear`
                    }
                }, 500)
            }
        }