轮播图 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* li {
            list-style: none;
        } */

        .banner {
            background-color: red;
            width: 700px;
            height: 500px;
            margin: 0 auto;
            position: relative;
        }

        .ul li {
            width: 700px;
            height: 500px;
            font-size: 60px;
            color: white;
            line-height: 500px;
            text-align: center;
            list-style: none;
            display: none;
        }

        .ol {
            width: 100%;
            position: absolute;
            bottom: 10px;
            display: flex;
            justify-content: center;
            line-height: 30px;

        }

        .ol li {
            list-style: none;
            width: 20px;
            height: 20px;
            background-color: aliceblue;
            border-radius: 50%;
            margin: 10px;
        }

        .span1 {
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background: rgba(0, 0, 0, 0.3)
        }

        .span2 {
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -20px;
            width: 40px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #0000004d
        }

        .ul .show {
            display: block !important;
        }

        .ol .active {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="banner">
        <ul class="ul">
            <li class="show">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ol class="ol">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <span class="span1">
            &lt;
        </span>
        <span class="span2">
            &gt;
        </span>
    </div>
    <script>
        //点击换图片


        var index = 0
        var t
        var ool = document.querySelectorAll('.ol li')
        console.log(ool.length)

        var oul = document.querySelectorAll('.ul li')
        console.log(oul)
        isDian()            //在变量的后面
        isZidong()
        prve()
        function isDian() {
            // console.log(ool)
            for (var i = 0; i < ool.length; i++) {
                ool[i].index = i
                ool[i].onclick = function () {
                    clearInterval(t)
                    for (var j = 0; j < ool.length; j++) {
                        ool[j].classList.remove('active')
                        oul[j].classList.remove('show')
                    }
                    this.classList.add('active')
                    index = this.index
                    oul[index].classList.add('show')

                }
            }
        }

        function isZidong() {
            clearInterval(t)
            t = setInterval(function () {
                index++
                if (index >= 4) {
                    index = 0
                }
                for (var j = 0; j < ool.length; j++) {
                    ool[j].classList.remove('active')
                    oul[j].classList.remove('show')
                }
                ool[index].classList.add('active')
                oul[index].classList.add('show')
            }, 1000)

        }

        function prve() {
            $('.span1').onclick = function () {
                index--
                if (index < 0) {
                    index = 3
                }
                for (var j = 0; j < ool.length; j++) {
                    ool[j].classList.remove('active')
                    oul[j].classList.remove('show')
                }
                ool[index].classList.add('active')
                oul[index].classList.add('show')

            }

        }

        function $(n) {
            return document.querySelector(n)
        }
    </script>


</body>

</html>

 

posted @ 2021-07-09 18:42  JSkolo_yyds  阅读(32)  评论(0)    收藏  举报