jquery轮播图_$('.pointer')[0].children-优快云博客

本文链接：https://blog.youkuaiyun.com/s20001027/article/details/120508149

这篇博客展示了如何使用JavaScript和CSS创建一个带有小圆点导航的图片轮播图。通过封装`nextPage`函数来实现图片的切换，同时提供了点击小圆点和左右箭头切换图片的功能。轮播图还包括自动播放、鼠标悬停暂停及离开恢复播放的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

封装切换下一页的函数

   function nextPage(next) {

            var target = 0;

            $(btnSpan[index - 1]).removeClass("circle")

            if (next) {

                if (index == 4) {

                    target = 0;

                    index = 1;

                } else {

                    index++

                    target = -600 * (index - 1)

                }

            } else {

                if (index == 1) {

                    index = 4;

                    target = -600 * (imagnumber - 1)

                } else {

                    index--;

                    target = -600 * (index - 1)

                }

            }

            $(".pic").animate({ left: target + "px" });

            $(btnSpan[index - 1]).addClass("circle")

        }

封装点击小圆点函数

 function clickButton() {

            for (var i = 0; i < btnSpan.length; i++) {

                btnSpan[i].onclick = function () {

                    $(btnSpan[index - 1]).removeClass('circle');

                    if ($(this).attr('index') === 1) {

                        index = 4;

                    } else {

                        index = $(this).attr('index') - 1;

                    }

                    nextPage(true);

                }

            }

完整代码：

轮播图css
* {

    margin: 0;

    padding: 0;

}



.container {

    width: 600px;

    height: 400px;

    overflow: hidden;

    margin: 0 auto;

    position: relative;



}



.pic {

    width: 2400px;

    height: 400px;

    position: absolute;



}

.pic img {

    width: 600px;

    height: 400px;

    float: left;

}



.pointer {

    width: 128px;

    height: 30px;

    position: absolute;

    bottom: 20px;

    left: 250px;

    border-radius: 15px;

    margin: 0 auto;

    background-color: rgb(104, 104, 104);

}



.pointer span {

    width: 10px;

    height: 10px;

    border-radius: 5px;

    display: inline-block;

    background-color: #fff;

    /* border: 1px solid #008c8c; */

    margin-left: 15px;

    margin-top: 10px;

}



.pointer .circle {

    background-color: #008c8c;

}



.left {

    width: 40px;

    height: 40px;

    color: black;

    text-align: center;

    background-color: rgb(177, 155, 155);

    font-weight: bold;

    font-size: 33px;

    position: absolute;

    top: 180px;

    left: 0;

    cursor: pointer;

    line-height: 35px;

    display: none;

}



.right {

    width: 40px;

    height: 40px;

    color: black;

    text-align: center;

    background-color: rgb(177, 155, 155);

    font-weight: bold;

    font-size: 33px;

    position: absolute;

    top: 180px;

    right: 0;

    cursor: pointer;

    line-height: 35px;

    display: none;

}


轮播图html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

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

    <link rel="stylesheet" href="./轮播图.css">

</head>

<body>

    <div class="container">

        <div class="pic">

            <img src="./img/1.jpg" alt="">

            <img src="./img/2.jpg" alt="">

            <img src="./img/3.jpg" alt="">

            <img src="./img/4.jpg" alt="">

        </div>



        <!-- 小圆点 -->

        <div class="pointer">

            <span index="1" class="circle"></span>

            <span index="2"></span>

            <span index="3"></span>

            <span index="4"></span>

        </div>



        <!-- 左右箭头 -->

        <div class="prev">

            <div class="left">&lt;</div>

            <div class="right">&gt;</div>

        </div>

    </div>

    <script>

        var imagnumber = 4;

        var index = 1;

        var timer;

        var btnSpan = $('.pointer')[0].children;

        // 自动播放

        autoplay()

        function autoplay() {

            timer = setInterval(function () {

                nextPage(true);

            }, 2000)

        }



        //  鼠标移入

        $(".container").mouseenter(function () {

            clearInterval(timer)

            $(".right").css('display', "block")

            $(".left").css('display', "block")



        })

        //    鼠标移出

        $(".container").mouseleave(function () {

            $(".right").css('display', "none")

            $(".left").css('display', "none")

            autoplay();

        })

        //   点击右箭头

        $('.right').click(function () {

            nextPage(true);

        })

        // 点击左箭头

        $('.left').click(function () {

            nextPage(false);

        })



        // 点击小圆点

        clickButton()

        function clickButton() {

            for (var i = 0; i < btnSpan.length; i++) {

                btnSpan[i].onclick = function () {

                    $(btnSpan[index - 1]).removeClass('circle');

                    if ($(this).attr('index') === 1) {

                        index = 4;

                    } else {

                        index = $(this).attr('index') - 1;

                    }

                    nextPage(true);

                }

            }

        }



        // 切换下一页

        function nextPage(next) {

            var target = 0;

            $(btnSpan[index - 1]).removeClass("circle")

            if (next) {

                if (index == 4) {

                    target = 0;

                    index = 1;

                } else {

                    index++

                    target = -600 * (index - 1)

                }

            } else {

                if (index == 1) {

                    index = 4;

                    target = -600 * (imagnumber - 1)

                } else {

                    index--;

                    target = -600 * (index - 1)

                }

            }

            $(".pic").animate({ left: target + "px" });

            $(btnSpan[index - 1]).addClass("circle")

        }

    </script>

</body>

</html>