JQ-轮播图 - 掘金

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li {
            display: none;
        }

        ol li {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 10px;
            /* background-color: red; */
        }

        ol {
            position: absolute;
            bottom: 10px;
            display: flex;
            width: 100px;
            justify-content: space-between;
            left: 600px;
        }

        .cc {
            background-color: red;
        }

        .main {
            position: relative;
            width: 1200px;
            margin: 30px auto;
        }

        .left,
        .right {
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 2px solid #000;
            cursor: pointer;
            display: inline-block;
            font-size: 20px;
        }

        .left {
            margin-right: 10px;
        }

        .right {
            margin-left: 10px;
        }

        .jjj {
            display: flex;
            align-items: center;
        }
    </style>
    <script src="../JQ/JQ-min.js"></script>
</head>

<body>
    <div class="main">
        <div class="jjj">
            <div class="left">&lt</div>
            <ul>
                <li style="display: block;">
                    <img src="http://p1.music.126.net/WDK1Xf03KHiwLEi_PWvgoQ==/109951165097312543.jpg?imageView&quality=89"
                        alt=""></li>
                <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/5hQfNP2sLRrSmEAx1OGDdg==/109951165097421077.jpg?imageView&quality=89"
                        alt=""></li>
            </ul>
            <div class="right">&gt</div>
        </div>

        <ol>
            <li class="cc"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <script>
        $(function () {
            let timer = null;
            let i = 0;

            function fn() {
                timer = setInterval(() => {
                    i++;
                    if (i === 4) i = 0
                    $('ul>li').eq(i).show().siblings().hide()
                    $('ol>li').eq(i).addClass('cc').siblings().removeClass('cc')
                }, 1000);
            }
            fn()

            $('ol>li').click(function () {
                clearInterval(timer)
                i = $(this).index()
                $('ul>li').eq(i).show().siblings().hide()
                $('ol>li').eq(i).addClass('cc').siblings().removeClass('cc')
                fn()
            })


            $('.right').click(function () {
                clearInterval(timer)
                i++;
                if (i >= 4) i = 0
                $('ul>li').eq(i).show().siblings().hide()
                $('ol>li').eq(i).addClass('cc').siblings().removeClass('cc')
                fn()
            })
            $('.left').click(function () {
                clearInterval(timer)
                i--;
                if (i < 0) i = 4
                $('ul>li').eq(i).show().siblings().hide()
                $('ol>li').eq(i).addClass('cc').siblings().removeClass('cc')
                fn()
            })

        })
    </script>
</body>

</html>