筑坐极_jQuery-无缝轮播图

第一步:

布局好html和css

jQuery-无缝轮播图

<div class="screen">

    <ul class="ul">
        <li><img src="./img/banner_01.jpg" alt=""></li>
        <li><img src="./img/banner_02.jpg" alt=""></li>
        <li><img src="./img/banner_03.jpg" alt=""></li>
        <li><img src="./img/banner_04.jpg" alt=""></li>
        <li><img src="./img/banner_05.jpg" alt=""></li>
    </ul>

    <ul class="dots">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .screen {
        width: 670px;
        height: 329px;
        border: 1px solid black;
        margin-top: 100px;
        margin-left: auto;
        margin-right: auto;

        overflow: hidden; /*超出部分隐藏*/

        position: relative;

    }

    .ul {
        width: calc(670px * 5);
        height: 329px;
        background: #c0f0f3;
        margin: 0;
        padding: 0;
        list-style: none; /*去掉小黑点*/
    }

    .ul > li {
        width: 670px;
        height: 329px;
        float: left;
    }

    .dots {
        position: absolute;
        top: 300px;
        left: 282px;
        list-style: none;
    }

    .dots > li {
        float: left;
        width: 12px;
        height: 12px;
        background: #0daf90;
        margin-left: 8px;
        border-radius: 6px;
        transition: all 0.3s;
        cursor: pointer;
    }

    .dots > li.active {
        width: 24px;
    }
</style>

第二步:js的部分

<script type="text/javascript">

    $(function () {

        let idx = 0;
        let timer = null;

        let imgWidth = $(".ul>li>img").eq(0).width(); //获取图片宽
        let q = $(".ul>li").length; //获取轮播个数
        // console.log(imgWidth);
        // console.log(q);

        let clone = $(".ul>li").eq(0).clone();
        $(".ul").append(clone);
        $(".ul").width((q + 1) * imgWidth + "px");


        $(".dots>li").mouseenter(function () {
            idx = $(this).index();
            $(this).siblings("li").removeClass("active");
            $(this).addClass("active");
            $(".ul").stop().animate({"margin-left": -(idx * imgWidth) + "px"}, 500);
        })


        autoPlay();

        function autoPlay(){
            timer = setInterval(function () {
                if (idx < 5) {
                    idx++;
                    $(".ul").stop().animate({"margin-left": -(idx * imgWidth) + "px"}, 500);

                    $(".dots>li").removeClass("active");
                    $(".dots>li").eq(idx===5?0:idx).addClass("active");

                } else {
                    idx = 1;
                    $(".ul").css({"margin-left": "0"})
                    $(".ul").stop().animate({"margin-left": -(idx * imgWidth) + "px"}, 500);


                    $(".dots>li").removeClass("active");
                    $(".dots>li").eq(1).addClass("active");

                }
            }, 1000)
        }



        $(".screen").mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            autoPlay();
        })



    })


</script>

jQuery-无缝轮播图

朱明*

js,html,jquery

jQuery-无缝轮播图

2021.06.18

946人

朱明*

天津市宁河县

Hot:20508

朱明*

当前作品暂无评分

还未获得评语哦~