您的位置:首页 > 编程语言

banner轮播无缝滚动 jq代码

2017-01-18 11:19 302 查看
HTML:

<div class="box">
    <ul>
      <li>11111</li>
      <li>22222</li>
    </ul>
</div>


JQ:

$(function(){
  setInterval(function(){
      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的宽度.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: