首页 > 代码库 > banner轮播无缝滚动万金油jq代码
banner轮播无缝滚动万金油jq代码
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的宽度. 封装是为了重复调用的时候,减少代码量。
banner轮播无缝滚动万金油jq代码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。