HTML轮播（1）

前言
要想实现轮播，我们就得先把最基础的功能实现，那就是滚动，实现了滚动后就可以继续扩展，完成更多想要的效果
CSS

<style>
        #LB {
            width: 100%;
    height: 948px;
    overflow: hidden;
        }

        #LB ul {
    width: 100%;
    height: 100%;
    transform: translateY(0px);
        }

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

        #LB ul li img {
            width:100%;
            height:100%;
        }
</style>

HTML

<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 imgHeight = 0;
    var Speed = 0.01;
    var Lilength = 0;

    Lilength = $("#LB ul li").height() * ($("#LB ul li").length-1);

    setInterval(function () {
        if (imgHeight == Lilength) {
            imgHeight = 0;
        }
    $("#LB ul").css("transform", "translateY(" + -imgHeight++ + "px)")
    }, Speed * 1000)
</script>

效果

这样就完成了轮播的滚动，下一篇我们继续优化，扩展轮播
END