HTML轮播（3）

前言
现在给轮播加上可视化的点，实际这样的轮播已经算完成的了
CSS

    #LB {
        width: 100%;
height: 948px;
overflow: hidden;
position:relative;
    }

    #LB ul {
width: 100%;
height: 100%;
    }

    #LB ul li {
        padding:0;
        margin:0;
        width:100%;
        height:100%;
    }

    #LB ul li img {
        width:100%;
        height:100%;
    }

    input {
        display:block;
        width:40%;
        height:32px;
        background:rgba(52, 162, 255, 0.64);
        border:none;
        color:#fff;
        padding:0px 5px;
        margin:auto;
    }

    #LB .lb_li {
        position: absolute;
        top: 50%;
        right: 0px;
        display: inline-block;
        transform: translateY(-20%);
        z-index: 2;
        width: 3%;
        height: 100%;
    }
        #LB .lb_li li {
            width: 20px;
            height: 20px;
            border-radius: 50px;
            border: 1px solid #fff;
            margin:5px 0px;
        }

        .on {
            background:#fff;
        }

HTML

<div>
    <div style="position:fixed;top:0px;left:0px;width:100%;display:flex;z-index:2;">
        <input type="button" value="上一张" onclick="Back()" />
        <input type="button" value="下一张" onclick="Next()" />
    </div>
    <div id="LB">
        <ul class="lb_li">
            <li class="on"></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="lb_ul">
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554702318984&di=b4256edfa635b6e87ea43d336c6a1e39&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F68%2F59%2F71X58PICNjx_1024.jpg" /></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554702318984&di=b75fa0cf7e6c7ec2b84d6caa3c79bd54&imgtype=0&src=http%3A%2F%2Fpic24.nipic.com%2F20120906%2F2786001_082828452000_2.jpg" /></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554702318984&di=7be7885e9826ed5397017dbc980cb108&imgtype=0&src=http%3A%2F%2Fpic75.nipic.com%2Ffile%2F20150821%2F9448607_145742365000_2.jpg" /></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554702318984&di=b4256edfa635b6e87ea43d336c6a1e39&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F15%2F68%2F59%2F71X58PICNjx_1024.jpg" /></li>
        </ul>
    </div>
</div>

JS
引用jq文件

<script src="~/Plugins/jquery-3.2.1.min.js"></script>

代码

    var Speed = 3000;//时隔几秒切换一次
    var AnimaSpeed = 1000;//动画速度
    var index = 0;//索引
    var LBI = setInterval(Carousel, Speed);//设置定时器


    //下一张图片
    function Back() {
        if (index > 0) {
            index -= 1;
            SetAnimate();
        } else {
            index = $("#LB .lb_ul li").length - 1;
            SetAnimate();
        }
        Ul_list(index);
        clearInterval(LBI);//清除定时器
        LBI = setInterval(Carousel, Speed);//启动定时器
    }
    //上一张图片
    function Next() {
        if (index < $("#LB .lb_ul li").length - 1) {
            index += 1;
            SetAnimate();
        } else {
            index = 0;
            SetAnimate();
        }
        Ul_list(index);
        clearInterval(LBI);//清除定时器
        LBI = setInterval(Carousel, Speed);//启动定时器
    }




    //鼠标移入暂停
    $("#LB").mouseenter(function () {
        clearInterval(LBI);//清除定时器
    })
    //鼠标移出继续
    $("#LB").mouseleave(function () {
        LBI = setInterval(Carousel, Speed);//启动定时器
    })

    function Carousel() {
        //最基础的轮播
        if (index + 1 == $("#LB .lb_ul li").length) {
            $("#LB .lb_ul").css("margin-top", "0px")
            index = 0;
        }
        if (index < $("#LB .lb_ul li").length) {
            index++;
            Ul_list(index);
        }
        SetAnimate();
    }
    function SetAnimate() {
        $("#LB .lb_ul").animate({
            "margin-top": "" + (-$("#LB .lb_ul li").height() * index) + "px"
        }, AnimaSpeed)
    }

    function Ul_list() {
        $.each($(".lb_li").children(), function (i) {
            $(".lb_li").children()[i].classList.remove("on");
        })
        if ($(".lb_li").children()[index] != undefined) {
            $(".lb_li").children()[index].classList.add("on");
        } else {
            $(".lb_li").children()[0].classList.add("on");
        }
    }

效果

这样就完成了轮播
END