<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>
jquery实现的不间断滚动插件
最新推荐文章于 2018-11-14 14:31:00 发布