HTML轮播（1）

前言

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

CSS

#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%;
}

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>

let imgHeight = 0;
let Speed = 0.01;
let 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)

效果

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

END