码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-01-18 12:38:18      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:宽度   scroll   代码量   tin   还原   上下   app   pen   top   

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代码

标签:宽度   scroll   代码量   tin   还原   上下   app   pen   top   

原文地址:http://www.cnblogs.com/zjjDaily/p/6296062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!