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的宽度.    

转载于:https://www.cnblogs.com/zjjDaily/p/6296062.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值