筑坐极_无限轮播图

步骤1:布局html页面和css文件

html:

<div class="cont">
    <div class="screen">
        <ul class="pic">
            <li><img src="../Js/imgs/0001.jpg" alt=""></li>
            <li><img src="../Js/imgs/0002.jpg" alt=""></li>
            <li><img src="../Js/imgs/0003.jpg" alt=""></li>
            <li><img src="../Js/imgs/0004.jpg" alt=""></li>
            <li><img src="../Js/imgs/0005.jpg" alt=""></li>
        </ul>
    </div>
    <div class="dot">
        <ul class="alldot">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="btn">
        <span class="left"><</span>
        <span class="right">></span>
    </div>
</div>

css:

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .cont{
        width: 1365px;
        height: 655px;
        /*background: #c0f0f3;*/
    }
    .screen{
        float: left;
        width: 670px;
        height: 329px;
        border: 1px solid red;
        margin: 143px 0 0 348px;
        overflow: hidden;
    }
    .pic{
        float: left;
        width: calc(670px*5);
        height: 329px;
        /*background: gold;*/
    }
    .pic>li{
        list-style: none;
        float: left;
    }
    .dot{
        float: left;
        width: 130px;
        height: 10px;
        /*background: darkorange;*/
        margin: -30px 0 0 627px;
    }
    .alldot{
        float: left;
        list-style: none;
    }
    .alldot>li{
        float: left;
        width: 10px;
        height: 10px;
        border-radius: 6px;
        background: #ffffff;
        margin-left: 13px;
        transition: all 0.5s;
        cursor: pointer;
    }
    .alldot>li.active{
        width: 20px;
    }
    .btn{
        width: 670px;
        height: 100px;
        float: left;
        /*background: brown;*/
        margin: -200px 0 0 349px;
    }
    .left{
        width: 20px;
        height: 100px;
        float: left;
        line-height: 100px;
        font-size: 60px;
        color: #b4b4b4;
        cursor: pointer;
        transition: all 0.7s;
        margin-left: 40px;
    }
    .right{
        width: 20px;
        height: 100px;
        float: left;
        line-height: 100px;
        font-size: 60px;
        margin-left: 530px;
        color: #b4b4b4;
        cursor: pointer;
        transition: all 0.7s;
    }
    .left:hover{
        font-size: 90px;
        color: white;
    }
    .right:hover{
        font-size: 90px;
        color: white;
    }
</style>

步骤2:编写Js部分代码

<script type="text/javascript">
    $(function () {
        let index = 0;
        let picLen = $(".pic>li").length;
        let picWidth = $(".pic>li>img").eq(0).width();
        let timer = null;
        let clone = $(".pic>li>img").eq(0).clone();
        $(".pic").append(clone);
        $(".pic").width(((picLen+1)*picWidth)+"px");

        $(".alldot>li").mouseenter(function () {
            index = $(this).index();
            $(".alldot>li").removeClass("active");
            $(this).addClass("active");
            $(".pic").stop().animate({"margin-left":-(index*picWidth)+"px"},500);
        });
        function auto(){
            timer = setInterval(function () {
                if(index < picLen){
                    index++;
                    $(".pic").animate({"margin-left":-(index*picWidth)+"px"},500);
                    $(".alldot>li").removeClass("active");
                    $(".alldot>li").eq(index===picLen ? 0:index).addClass("active");
                }
                else{
                    index = 1;
                    $(".pic").css({"margin-left":0});
                    $(".pic").stop().animate({"margin-left":-(index*picWidth)+"px"},500)
                    $(".alldot>li").removeClass("active");
                    $(".alldot>li").eq(index===picLen ? 0:index).addClass("active");
                }
            },1500)
        }
        $(".left").click(function () {
            if(index!==0){
                index--;
                $(".pic").stop().animate({"margin-left":-(index*picWidth)+"px"},500);
                $(".alldot>li").removeClass("active");
                $(".alldot>li").eq(index).addClass("active");
            }
            else{
                index=picLen-1;
                $(".pic").stop().animate({"margin-left":-(index*picWidth)+"px"},500);
                $(".alldot>li").removeClass("active");
                $(".alldot>li").eq(index).addClass("active");
            }
        });
        $(".right").click(function () {
            if(index!==picLen-1){
                index++;
                $(".pic").stop().animate({"margin-left":-(index*picWidth)+"px"},500);
                $(".alldot>li").removeClass("active");
                $(".alldot>li").eq(index).addClass("active");
            }
            else{
                index=0;
                $(".pic").stop().animate({"margin-left":-(index*picWidth)+"px"},500);
                $(".alldot>li").removeClass("active");
                $(".alldot>li").eq(index).addClass("active");
            }
        });
        auto();
        $(".dot").mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            auto();
        })
        $(".left").mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            auto();
        })
        $(".right").mouseenter(function () {
            clearInterval(timer);
        }).mouseleave(function () {
            auto();
        })
    })
</script>

无限轮播图

梁松*

Js,HTML,jQuery

利用jQuery实现无限轮播图功能

2021.06.20

859人

梁松*

天津市河东区

Hot:12023

梁松*

当前作品暂无评分

还未获得评语哦~