banner轮播无缝滚动万金油jq代码

Posted 2020-08-28 努力┗(｀O′)┛奋斗！

html：

　　<div class="box">

　　　　<ul>

　　　　　　<li>11111</li>

　　　　　　<li>22222</li>

　　　　</ul>

　　</div>

 

JQ:

调用：$(function(){

　　　　setinterval(functon(){

　　　　　　scroll($(".box ul"));　　

　　　　},1000);       

　　　})

封装：function scroll(obj){

　　　　var h=obj.find(" li ").height();      //获取每个li的高度

　　　　obj.animate({"margin-top":-h},function(){     //整个ul向上滚动一个li的高度,h的正负决定滚动的方向

　　　　　　obj.find("li").eq(0).appendto(obj);　　　　//把ul的第一个li放到最后

　　　　　　obj.css("margin-top",0);　　　　　　　　//ul位置还原，看起来就像是在无缝滚动一样

　　　　})

　　}

 

说明：如果是上下无缝滚动，就用margin-top;如果是左右滚动就用margin-left，然后是获取每个li的宽度.    封装是为了重复调用的时候，减少代码量。