手写源码之--js轮播图..left, .background: rgba(29, 255, 181, 0..left:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .wrap {
            width: 480px;
            height: 360px;
            margin: auto;
            border: 1px solid #000;
            position: relative;
        }

        .left, .right {
            width: 30px;
            height: 20px;
            background: rgba(29, 255, 181, 0.55);
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            text-align: center;
            color: #061f3e;
            line-height: 20px;
            cursor: pointer;
        }

        .left:hover, .right:hover {
            background: #15ffa7;
        }

        .left {
            left: 10px;
        }

        .right {
            right: 10px;
        }

        .dots {
            display: flex;
            width: 100px;
            justify-content: space-between;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 10px;
        }

        .dots > span {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
        }

        .active {
            background: red;
        }
    </style>
</head>
<body>
<div class="wrap">
    <img src="" alt="">
    <div class="left">&lt;</div>
    <div class="right">&gt;</div>
    <div class="dots">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<script>
    window.addEventListener("load", () => {
        function $(ele) {
            return document.querySelector(ele)
        }

        function $s(eles) {
            return document.querySelectorAll(eles)
        }

        /*图片数组*/
        const imgArr = [
            "http://cdn.jirengu.com/book.jirengu.com/img/1.jpg",
            "http://cdn.jirengu.com/book.jirengu.com/img/2.jpg",
            "http://cdn.jirengu.com/book.jirengu.com/img/3.jpg",
            "http://cdn.jirengu.com/book.jirengu.com/img/4.jpg",
        ];
        const dots = $s(".dots>span");
        //获取页面元素
        const [wrap, img, left, right] = [$(".wrap"), $("img"), $(".left"), $(".right")];
        let timer = null;//定时器
        let count = 0;//下标

        /*自动轮播函数*/
        function autoLoop(num=1) {
            count += num;
            if (count > imgArr.length - 1) {
                count = 0
            }
            if (count < 0) {
                count = imgArr.length - 1
            }
            img.src = imgArr[count];
            for (let i = 0; i < dots.length; i++) {
                if (i === count) {
                    dots[i].style.backgroundColor = "red";
                } else {
                    dots[i].style.backgroundColor = "#fff"
                }
            }
        }

        /*圆点切换函数*/
        function changeDot(btn) {
            for (let i = 0; i < btn.length; i++) {
                btn[i].index = i;
                btn[i].onclick = function () {
                    for (let j = 0; j < btn.length; j++) {
                        btn[j].style.backgroundColor = "#fff";
                        btn[this.index].style.backgroundColor = "red";
                        img.src = imgArr[this.index]
                    }
                }
            }
        }

        img.setAttribute("src", imgArr[count]);//显示第一张
        timer = setInterval(autoLoop, 1000);//执行定时器
        //    点击下一张
        right.onclick = () => {
            autoLoop(1)
        };
        //    点击上一张
        left.onclick = () => {
            autoLoop(-1)
        };
        //    鼠标悬浮,停止轮播
        wrap.onmouseover = () => {
            clearInterval(timer)
        };
        //    鼠标离开,开始轮播
        wrap.onmouseleave = () => {
            timer = setInterval(autoLoop, 1000)
        };
        //    点击圆点切换
        changeDot(dots);
    })
</script>
</body>
</html>