jQuery循环滚动效果

滚动到底部后返回顶部 var rowBack = ()=>{ mTop = (mTop <= -33*7 ? -33 : mTop - 132) var css = {'margin-top': warnHight}; $('#list').animate(css ,800); } setInterval(()=>{ if($('#list').hasClass('table')){ rowBack() } },2000) 滚动到底部后无缝连续向上循环滚动 参考：https://www.cnblogs.com/hfx123/p/9520732.html <ul style="border: 1px solid blue;height: 60px;width:300px;overflow: hidden;"> <li>aaaaaaaaaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbbbbbbbbb</li> <li>ccccccccccccccccccccc</li> <li>ddddddddddddddddddddd</li> <li>eeeeeeeeeeeeeeeeeeeee</li> <li>fffffffffffffffffffff</li> <li>ggggggggggggggggggggg</li> <li>hhhhhhhhhhhhhhhhhhhhh</li> </ul> $(function(){ //每隔两秒进行一次滚动 var height = $("ul").height() var timing =setInterval(info,2000,height); $("ul").hover( function(){clearInterval(timing);}, function(){timing = setInterval(info,2000,height);} ) }) function info(height){ //复制第一个li var li =$("ul>li:eq(0)").clone(); //使用animate对li的外边距进行调整从而达到向上滚动的效果 $("ul>li:eq(0)").animate({marginTop:(-height)},2000,function(){ //对已经消失的li进行删除 $("ul>li:eq(0)").remove(); //把复制后的li插入到最后 $("ul").append(li); }) } 利用jquery的slideDown/slideUp进行滚动 原始节点的内容不显示，设置为display:none， 然后将#list里的节点，按顺序轮换添加到item1或item2，然后交替用slideDown来模拟滚动 <ul style="border: 1px solid blue;height:10px;width:300px;overflow: hidden;"> <li id='item1' style="dislplay:none"></li> <li id='item2' style="dislplay:none"></li> </ul> <ul id='list' style="dislplay:none"> <li>aaaaaaaaaaaaaaaaaaaaa</li> <li>bbbbbbbbbbbbbbbbbbbbb</li> <li>ccccccccccccccccccccc</li> <li>ddddddddddddddddddddd</li> <li>eeeeeeeeeeeeeeeeeeeee</li> <li>fffffffffffffffffffff</li> <li>ggggggggggggggggggggg</li> <li>hhhhhhhhhhhhhhhhhhhhh</li> </ul> //js代码未验证