HTML轮播(2)

前言
现在在完成轮播的框架上进行扩展更多的功能，上下切换图片，以及添加动画滚动更加平滑过渡
CSS

<style>
        #LB {
            width: 100%;
    height: 948px;
    overflow: hidden;
        }
 
        #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;
        }
    </style>

HTML

<div style="position:fixed;top:0px;left:0px;width:100%;display:flex">
        <input type="button" value="上一张" "Back()" />
        <input type="button" value="下一张" "Next()" />
    </div>
    <div id="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>
 

JS
引用jq文件

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

代码

<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 ul li").length -1;
                SetAnimate();
            }
        }
        //上一张图片
        function Next() {
            if (index < $("#LB ul li").length -1) {
                index += 1;
                SetAnimate();
            } else {
                index = 0;
                SetAnimate();
            }
        }
 
        //鼠标移入暂停
        $("#LB").mouseenter(function () {
            clearInterval(LBI);//清除定时器
        })
        //鼠标移出继续
        $("#LB").mouseleave(function () {
            LBI = setInterval(Carousel, Speed);//启动定时器
        })
 
        function Carousel() {
            //最基础的轮播
            if (index + 1 == $("#LB ul li").length) {
                $("#LB ul").css("margin-top", "0px")
                index = 0;
            }
            if (index < $("#LB ul li").length) {
                index++;
            }
            SetAnimate();
        }
        function SetAnimate() {
            $("#LB ul").animate({
                "margin-top": "" + (-$("#LB ul li").height() * index) + "px"
            }, AnimaSpeed)
        }
</script>

效果

这样就完成了轮播的动画平滑滚动以及上下切换图片，下一篇我们继续扩展轮播
END