用jQuery来写轮播图

最新推荐文章于 2025-06-11 14:48:20 发布

十年磨剑&百年铸锋

最新推荐文章于 2025-06-11 14:48:20 发布

阅读量204

点赞数

分类专栏：轮播图文章标签： jquery 前端

本文链接：https://blog.youkuaiyun.com/weixin_48861173/article/details/107027273

版权

轮播图专栏收录该内容

1 篇文章

订阅专栏

轮播图

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body {
        background-color: #cccccc;
    }
    .container {
        width: 500px;
        height: 300px;
        margin: 50px auto;
        position: relative;
    }
    .wipper {
        width: 300px;
    }
    .wipper li {
        width: 500px;
        height: 300px;
        display: none;
    }
    .wipper li:first-of-type {
        background-color: red;
    }
    .wipper li:nth-of-type(2) {
        background-color: orange;
    }
    .wipper li:nth-of-type(3) {
        background-color: yellow;
    }
    .wipper li:nth-of-type(4) {
        background-color: green;
    }
    .wipper li:nth-of-type(5) {
        background-color: cyan;
    }
    .wipper li:nth-of-type(6) {
        background-color: blue;
    }
    .wipper li:nth-of-type(7) {
        background-color: purple;
    }
    .wipper li:first-of-type {
        display: block;
    }
    .round {
        position: absolute;
        bottom: 30px;
        right: 50px;
        width: 200px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .round li {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: white;
        margin: 0px 7px;
    }
    .round li.color {
        background-color: black;
    }
    .arrowleft {
        width: 15px;
        height: 50px;
        background-color: black;
        position: absolute;
        top: 125px;
        left: -15px;
        cursor: pointer;
    }
    .arrowright {
        width: 15px;
        height: 50px;
        background-color: black;
        position: absolute;
        top: 125px;
        right: -15px;
        cursor: pointer;
    }
</style>
<body>

    <div class="container">
        <ul class="wipper">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="round">

            <li class="color"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>


        </ul>

        <div class="arrowleft">

        </div>

        <div class="arrowright">

        </div>

    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
        $(function () {
            let i = 0
            let timer;
            function run() {
                timer = setInterval(function () {
                    if (++i === 7) i = 0
                    $('.wipper li').eq(i).show().siblings().hide()
                    $('.round li').eq(i).addClass('color').siblings('.color').removeClass('color')

                }, 2000)
            }
            run();
            $('.arrowleft').click(function () {
                clearInterval(timer)
                //清除定时器的作用是为了处理一些人为插入操作导致的轮播效果效果的不和谐，不流畅不自然情况
                if (--i < 0) i = 6
                $('.wipper li').eq(i).show().siblings().hide()
                $('.round li').eq(i).addClass('color').siblings('.color').removeClass('color')
                run()
                //完成操作时重新调用定时器
            })

            $('.arrowright').click(function () {
                clearInterval(timer)
                if (++i > 6) i = 0
                $('.wipper li').eq(i).show().siblings().hide()
                $('.round li').eq(i).addClass('color').siblings('.color').removeClass('color')
                run()
            })
            $('.round li').click(function () {
                clearInterval(timer)
                i = $(this).index();
                $('.wipper li').eq(i).show().siblings().hide()
                $('.round li').eq(i).addClass('color').siblings('.color').removeClass('color')
                run()
            })
        })
    </script>
</body>