jquery实现的不间断滚动插件

<html>
<head>
 <script language="javascript" src="jquery.min.js"></script>
 <script language="javascript">
  (function($){
   $.fn.marquee=function(speed,width,height,right)
   {
    var len=$("li",p).length;
    $("ul",this).append($("ul",this).html());
    if(undefined==right) right=10; 
    $("ul",this).css({"width":"9999px","margin-left":"0px"});
    $("li",this).css({"float":"left","margin-right":right+"px"});
    $(this).css({"width":width+"px","height":height+"px","position":"relative","overflow":"hidden"});
    var num=0;
    var p=this;
    var thread=function(){
     num=num-10;
     var max=($("li",p).eq(0).width()+right)*len-1;
     if(num<=-max) num=0;
     $("ul",p).css({"margin-left":num+"px"});
    }
    var t1=setInterval(function(){
     thread();
    },speed);
    $(this).mouseover(function(){
     clearInterval(t1);
    })
    $(this).mouseout(function(){
     t1=setInterval(function(){
      thread();
     },speed);
    });
   }
  }(jQuery));
  $(function(){
   $(".lef").marquee(100,1000,300);
  });
 </script>
</head>
<body>
 <div class="lef">
  <ul>
  <li><img src="http://www.120jkjk.com//templets/gz/images/ry1.jpg" alt=""></li>
  <li><img src="http://www.120jkjk.com//templets/gz/images/ry2.jpg" alt=""></li>
  <li><img src="http://www.120jkjk.com//templets/gz/images/ry3.jpg" alt=""></li>
  <li><img src="http://www.120jkjk.com//templets/gz/images/ry4.jpg" alt=""></li>
  <li><img src="http://www.120jkjk.com//templets/gz/images/ry5.jpg" alt=""></li>
  <li><img src="http://www.120jkjk.com//templets/gz/images/ry6.jpg" alt=""></li>
  </ul>
 </div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值