jq实现无限滚动

实现原理：

           定时器和anmiate( )动画

用到的技术：

           animate ( )、first ( )、appendTo ( )

源码：

      HTML

<div class="box"> 
     <ul>
        <li class="l1">1</li>
        <li class="l2">2</li>
        <li class="l3">3</li>
        <li class="l4">4</li>
        <li class="l5">5</li>
     </ul>
</div>

      CSS

.box{
    margin: 100px;
    width: 200px;
    height: 200px;
    text-align: center;
    border: 2px solid #000;
    overflow: hidden;
 }
.box ul li{
    width: 200px;
    height: 50px;
    line-height: 50px;
 }
.l1{background: skyblue;}
.l2{background: palegreen;}
.l3{background: blueviolet;}
.l4{background: tomato;}
.l5{background: orange;}

JS

<script>
        var  height=$(".box ul li").first().height();
        console.log(height)
        setInterval(function(){
			$(".box ul").animate({marginTop: -height},"slow",function(){
				$(".box ul li").first().appendTo($(".box ul"));
				$(".box ul").css("marginTop",0)
			});
		},1500)
</script>

效果图：