js简易轮播图

<style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none
        }

        .bigBox {
            width: 400px;
            height: 400px;
            margin: 50px auto;
            position: relative;
        }

        .box1 {
            width: 400px;
            height: 400px;
        }

        .box1 img {
            width: 100%;
            height: 100%;
            display: none;
        }

        .box1 .active {
            display: block;
        }

        .box2 {
            position: absolute;
            right: 20px;
            bottom: 25px;
        }

        .box2 li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #000;
            float: left;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box2 .active {
            background-color: red;
            color: #ffffff;
        }
    </style>

<div class="bigBox">
        <div class="box1">
            <img class="active" src="1.jpg" alt="">
            <img src="2.jpg" alt="">
            <img src="3.jpg" alt="">
            <img src="4.jpg" alt="">
        </div>
        <ul class="box2">
            <li class="active" data-index="0"></li>
            <li data-index="1"></li>
            <li data-index="2"></li>
            <li data-index="3"></li>
        </ul>
    </div>
    <script>
        var oImg = document.querySelectorAll('.box1 img')
        var oUl = document.querySelector('.box2')
        var oLi = document.querySelectorAll('.box2 li')

        var index = 0;

        var timer = setInterval(function () {
            index++;
            if (index >= oImg.length) {
                index = 0;
            }
            activeOne()
        }, 2000)

        oUl.onmouseover = function (e) {
            var ev = event || e;
            var target = ev.target || ev.srcElement;

            if (target.nodeName === 'LI') {
                clearInterval(timer);
                index = target.getAttribute('data-index');
                activeOne();
            }
        }

        oUl.onmouseout = function (e) {
            var ev = event || e;
            var target = ev.target || ev.srcElement;

            if (target.nodeName === 'LI') {
                clearInterval(timer);
                timer = setInterval(function () {
                    index++;
                    if (index >= oImg.length) {
                        index = 0;
                    }
                    activeOne();
                }, 2000)
            }
        }

        function activeOne() {
            Array.from(oImg).forEach(function (item, i) {
                oImg[i].classList.remove('active');
                oLi[i].classList.remove('active');
            })
            oImg[index].classList.add('active');
            oLi[index].classList.add('active');
        }

    </script>