データ挿入タイミング左スクロール

<style type="text/css">.list,li{list-style:none; margin:0; padding:0;}  
        .scroll{ width:500px; height:25px; overflow:hidden; border:1px solid #333;}  
        .scroll li{ width:500px; height:25px; line-height:25px; overflow:hidden; float:left;}  
        .scroll li a{ font-size:14px;color:#333; text-decoration:none;}  
        .scroll li a:hover{ text-decoration:underline;}
</style>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>                         
<div class="scroll">              
<ul class="list">                  
<li id="1">
<a href="#" target="_blank">aaaaaaaaaaaaaaaaaaaaaaaaaaaaa1</a>
</li>                  
<li id="2">
<a href="#" target="_blank">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb2</a>
</li> 
<li>
<a href="#" target="_blank">4444444444444444444</a>
</li> 
<li>
<a href="#" target="_blank">5555555555555555555</a>
</li>  
<li>
<a href="#" target="_blank">66666666666666666666</a>
</li>
<li>
<a href="#" target="_blank">777777777777777777777777</a>
</li>              
</ul>          
</div>
<script>
		var html="<li>3333333333333</li>"
                function autoScroll(obj){
					var w = $(obj + " .list li").size() * 500;
					$(obj + " .list").css({
						width:w,
						overflow:"hidden",
						zoom:"1"
					});

                    $(obj).find(".list").animate({marginLeft:"-500px"},1000,function(){
						$(this).css({marginLeft:"0px"}).find("li:first").appendTo(this);
						$(this).find("li:first").after(html);
						html="";
                    })  
                } 
				$(".list").html();
				$("#2").remove();
				var i=0;
                $(function(){  
                    setInterval('autoScroll(".scroll")',10000);
					setInterval(function(){html="<li id='"+Math.random()*10+"'>"+(i++)+"</li>";},10000);
                }) </script>