jQuery轮播图

运行效果如下图：

CSS部分：

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .container {
            width: 1100px;
            margin: 20px auto;
        }

        .container li {
            display: none;
        }

        .container li:first-of-type {
            display: block;
        }

        .main {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nav {
            display: flex;
            position: absolute;
            bottom: 30px;
            width: 200px;
            height: 20px;
        }

        .nav li {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: #fff;
            margin: 0 10px;
        }

        .nav li.active {
            background: rgba(102, 102, 102, 0.5);
        }

        .arrow {
            width: 40px;
            height: 80px;
            position: absolute;
            background: rgba(48, 41, 41, 0.3);
            line-height: 80px;
            text-align: center;
            font-size: 30px;
            color: rgba(252, 252, 252, 0.8);
            cursor: pointer;
            user-select: none;
        }

        .arrow.arrowleft {
            left: 150px;
        }

        .arrow.arrowright {
            right: 170px;
        }
    </style>

html部分：

 <div class="main">

        <div class="arrow arrowleft">&lt;</div>
        <div class="arrow arrowright">&gt;</div>
        <ul class="container">
            <li>
                <img src="http://p1.music.126.net/uYEZk0fBieAsIU2jV7z_Tg==/109951165097321887.jpg?imageView&quality=89"
                    alt="">
            </li>
            <li>
                <img src="http://p1.music.126.net/w9_4EDtBaLAsg8E3k11Rkw==/109951165097376119.jpg?imageView&quality=89"
                    alt="">
            </li>
            <li>
                <img src="http://p1.music.126.net/2rqzxg-DP-7Rt3Ak_l7Uog==/109951165097437479.jpg?imageView&quality=89"
                    alt="">
            </li>
            <li>
                <img src="http://p1.music.126.net/f40GhB5MtgDaw9Qqq8ZY1A==/109951165097466001.jpg?imageView&quality=89"
                    alt="">
            </li>
        </ul>
        <ul class="nav">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

js部分：

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script>
            $(function () {
                let i = 0;
                let timer = null

                function run() {
                    timer = setInterval(() => {
                        if (++i === 4) i = 0
                        $(".container li").eq(i).show().siblings().hide()
                        $(".nav li").eq(i).addClass("active").siblings(".active").removeClass("active")
                    }, 1000)
                }
                run()

                $(".arrowleft").click(function () {
                    clearInterval(timer)
                    i--
                    if (i < 0) i = 3
                    $(".container li").eq(i).show().siblings().hide()
                    $(".nav li").eq(i).addClass("active").siblings(".active").removeClass("active")
                    run()
                })

                $(".arrowright").click(function () {
                    clearInterval(timer)
                    i++
                    if (i > 3) i = 0
                    $(".container li").eq(i).show().siblings().hide()
                    $(".nav li").eq(i).addClass("active").siblings(".active").removeClass("active")
                    run()
                })
                $(".nav li").click(function () {
                    clearInterval(timer)
                    i = $(this).index()
                    $(".container li").eq(i).show().siblings().hide()
                    $(".nav li").eq(i).addClass("active").siblings(".active").removeClass("active")
                    run()
                })
            })
        </script>