zoukankan      html  css  js  c++  java
  • 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的宽度.    

  • 相关阅读:
    文件的增删改查
    集合的使用
    字典的使用
    字符串常用操作
    简单购物车程序练习题
    列表
    数据运算数据类型与
    模块初识
    数据库时间设置
    ubuntu 修改时区
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/6296062.html
Copyright © 2011-2022 走看看