banner轮播无缝滚动 jq代码

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();      //获取每个li的高度
 8 　　　　obj.animate({"margin-top":-h},function(){     //整个ul向上滚动一个li的高度,h的正负决定滚动的方向
 9 　　　　obj.find("li").eq(0).appendTo(obj);　　　　//把ul的第一个li放到最后
10 　　　　obj.css("margin-top",0);　　　　　　　　//ul位置还原，看起来就像是在无缝滚动一样
11 
12 　　})
13 
14 }

说明：如果是上下无缝滚动，就用margin-top;如果是左右滚动就用margin-left，然后是获取每个li的宽度.    

posted @ 2017-01-18 11:19  站住，别跑  阅读(830)  评论(0)  编辑  收藏  举报