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

巴特西

HTML轮播（1）

最新文章

热门文章