无缝向上滚动原理代码

首先说下思路，假如滚动内容区域是ul li标签包裹的，

一、先是获取到li标签的高度，这个是向上滚动的距离，然后获取ul的高度，如果li的个数乘以li的高度大于ul的高度，则把里全部复制一份到最后一个li标签之后，开始滚动。

二、设置交互效果，就是鼠标滑过的时候停止滚动，划出继续滚动。把一个定时器方法放入到一个变量rolling里面，   这时候需要用到jq库hover方法，滑入清除清空定时器方法，滑出的时候启动定时器方法。

<script>
    $(document).ready(function () {
 
        var ll = 0;//向上移动的距离
 
        var rolling = setInterval(function () { star() }, 1000);
        var leng = $('.rolling').children().length;//获取滚动的个数
        var hei = leng * 30 + 30;//30是滚动的距离
        $(".rolling-li:last-child").after($(".rolling").html());//拷贝一份
 
        $(".rolling-li").hover(//鼠标滑过停止
            function () {
                clearInterval(rolling);
            },
            function () {
                rolling = setInterval(function () { star() }, 1000);
            }
        );
 
        function star() {//动画开始
            if (leng = 10) {
                if (ll >= hei) {
                    ll = 30;
                    $(".rolling-li").css("bottom", "0px");
                    star();
                } else {
                    $(".rolling-li").animate({ bottom: ll + 'px' });
                    ll += 30;
                }
            } else { clearInterval(rolling); }
            
        }
 
    });
</script>