请教一个jquery多行滚动效果的问题

下面是我写的一个jquery多行滚动效果，但其只执行一次就完了，请教下大侠是什么原因？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多行滚动</title>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
li {
height:20px;
}
</style>
</head>
<body>
<script type="text/javascript">
// 多行滚动
jQuery.fn.extend({
  marquee:function(opt){
   if(!opt)
var opt={};
var ul=this.find("ul:first");
var lineHeight=ul.find("li:first").height();
var lines=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10);
var speed=opt.speed?parseInt(opt.speed,10):1000; //卷动速度，数值越大，速度越慢（毫秒）
var li=ul.find("li");
var liSize=ul.find("li").size();
this.css({overflow:"hidden"});
        ul.css({margin:"0",padding:"0","list-style":"none"});
        li.css({margin:"0",padding:"0","list-style":"none"});
this.css({"height":(lineHeight*lines)+"px"});
        ul.css("height",(lineHeight*liSize)+"px");
ul.append(li.slice(0,lines).clone())
//滚动动画
var upHeight=0-liSize*lineHeight;
scrollUp=function(){
ul.animate({
marginTop:upHeight
},speed*liSize,function(){
ul.css({marginTop:0});
});
}
//scrollUp();
setInterval("scrollUp()",speed);
//循环滚动,且当鼠标到达时停止滚动
/*ul.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",speed);
});*/

   }
})</script>
<!-- 多行滚动 -->
<div id="scrollDiv">
    <ul>
        <li>这是公告标题的第一行</li>
        <li>这是公告标题的第二行</li>
        <li>这是公告标题的第三行</li>
        <li>这是公告标题的第四行</li>
        <li>这是公告标题的第五行</li>
        <li>这是公告标题的第六行</li>
        <li>这是公告标题的第七行</li>
        <li>这是公告标题的第八行</li>
    </ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
//$('#scrollDiv').a();
$('#scrollDiv').marquee({line:5,speed:200});
})
</script>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>多行滚动</title>
    <head>
        <script type="text/jscript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
    li {
    height:20px;
    }
    </style>
    </head>
    <body>
    <script type="text/javascript">
    // 多行滚动
    jQuery.fn.extend({
      marquee:function(opt){
      if(!opt)
    var opt={};
    var ul=this.find("ul:first");
    var lineHeight=ul.find("li:first").height();
    var lines=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10);
    var speed=opt.speed?parseInt(opt.speed,10):1000; //卷动速度，数值越大，速度越慢（毫秒）
    var li=ul.find("li");
    var liSize=ul.find("li").size();
    this.css({overflow:"hidden"});
      ul.css({margin:"0",padding:"0","list-style":"none"});
      li.css({margin:"0",padding:"0","list-style":"none"});
    this.css({"height":(lineHeight*lines)+"px"});
      ul.css("height",(lineHeight*liSize)+"px");
    ul.append(li.slice(0,lines).clone())
    //滚动动画
    var upHeight=0-liSize*lineHeight;
    scrollUp=function(){
    ul.animate({marginTop:upHeight},speed*liSize,
      function(){
        ul.append(li.slice(0,liSize).clone())
        upHeight=upHeight-liSize*lineHeight;
        scrollUp();
      });
    }
    scrollUp();
    //setInterval("scrollUp()",speed);
    //循环滚动,且当鼠标到达时停止滚动
    /*ul.hover(function(){
    clearInterval(timerID);
    },function(){
    timerID=setInterval("scrollUp()",speed);
    });*/  }
    })</script>
    <!-- 多行滚动 -->
    <div id="scrollDiv">
      <ul>
      <li>这是公告标题的第一行</li>
      <li>这是公告标题的第二行</li>
      <li>这是公告标题的第三行</li>
      <li>这是公告标题的第四行</li>
      <li>这是公告标题的第五行</li>
      <li>这是公告标题的第六行</li>
      <li>这是公告标题的第七行</li>
      <li>这是公告标题的第八行</li>
      </ul>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
    //$('#scrollDiv').a();
    $('#scrollDiv').marquee({line:5,speed:200});
    })
    </script>
    </body>
    </html>