HTML：

1 <div class="box"> 2 　　　　<ul> 3 　　　　　　<li>11111</li> 4 　　　　　　<li>22222</li> 5 　　　　</ul> 6 </div>

JQ:

1 $(function(){ 2 　　setInterval(function(){ 3 　　　　　　scroll($(".box ul"));　　 4 　　　　},1000); 5 　　}) 6 　　function scroll(obj){ 7 　　　　var h=obj.find(" li ").height(); //獲取每個(gè)li的高度 8 　　　　obj.animate({"margin-top":-h},function(){ //整個(gè)ul向上滾動(dòng)一個(gè)li的高度,h的正負(fù)決定滾動(dòng)的方向 9 　　　　obj.find("li").eq(0).appendTo(obj);　　　　//把ul的第一個(gè)li放到最后 10 　　　　obj.css("margin-top",0);　　　　　　　　//ul位置還原，看起來就像是在無縫滾動(dòng)一樣 11 12 　　}) 13 14 }

說明：如果是上下無縫滾動(dòng)，就用margin-top;如果是左右滾動(dòng)就用margin-left，然后是獲取每個(gè)li的寬度. ? ?

轉(zhuǎn)載于:https://www.cnblogs.com/zjjDaily/p/6296062.html

總結(jié)

以上是生活随笔為你收集整理的banner轮播无缝滚动 jq代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。