用js写轮播图

HTML

<div class="wrapBox">
        <div class="swiperBox">
            <p class="active">
                <img src="./images/QQ图片20201106100557.jpg" alt="">
            </p>
            <p><img src="./images/QQ图片20201106101305.jpg" alt=""></p>
            <p><img src="./images/u=414259162,185616959&fm=26&gp=0.jpg" alt=""></p>
            <p><img src="./images/下载.jpg" alt=""></p>
        </div>
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

CSS

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

        li {
            list-style: none
        }

        .wrapBox {
            width: 400px;
            height: 300px;
            margin: 50px auto;
            position: relative;
            background-color: #ff0;
            overflow: hidden;
        }

        .swiperBox p {
            width: 100%;
            /* display: none; */
            opacity: 0;
            transition: .3s;
            height: 300px;
            line-height: 300px;
            text-align: center;
            font-size: 40px;
            position: absolute;
            top: 0;
        }

        p:nth-child(2n) {
            background-color: pink;
        }

        .swiperBox .active {
            /* display: block; */
            opacity: 1;
        }

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

        .nav li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgb(252, 247, 247);
            float: left;
            margin: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav .active {
            background-color: rgb(20, 6, 66);
            color: #ffffff;
        }

        .swiperBox img {
            width: 100%;
            height: 100%;
        }
    </style>

JS

<script>
        //记录当前播放第几张 
        var index = 0;
        var t;
        autoPlay();
        // 拿ul和li和p的值
        var oPs = document.querySelectorAll('p');
        var oLis = document.querySelectorAll('li');
        var oUl = document.querySelector('ul');

        // 给每个li添加自定义属性 for循环遍历得到他每个li的角标
        for (var i = 0; i < oLis.length; i++) {
            oLis[i].index = i;
        }
        // 得到每个li的角标index

        //鼠标移入ul切换ops
        oUl.onmouseover = function (e) {
            var e = e || event;
            var target = e.target || e.srcElement;
            //要大写
            if (target.tagName === 'LI') {
                // 鼠标移入后图片不动，清除定时器
                clearInterval(t);
                // 点击出现单独样式
                activeOne(target.index)
            }
        }
        // 鼠标移除
        oUl.onmouseout = function () {
            autoPlay()
        }

        function autoPlay() {
            clearInterval(t);
            t = setInterval(function () {
                index++;
                // 如果加到等于p的长度，则切换到第一张
                if (index == oPs.length) {
                    index = 0
                }
                //清除所有的active
                activeOne(index)
            }, 1000)

        }
        // 把每个p和li都移除掉 
        // 再把每次点击的角标所表示的值单独添加样式
        function activeOne(aa) {
            for (var i = 0; i < oPs.length; i++) {
                oPs[i].classList.remove('active')
                oLis[i].classList.remove('active');
            }
            oPs[aa].classList.add('active');
            oLis[aa].classList.add('active');
        }
    </script>