js如何让图片自动滚动起来.

Question

以下代码,如何让 新品上市 那栏的 图片自动滚动起来:如图
演示站:http://www.hmxt888.com代码如下:<meta http-equiv="Content-Type" content="text/html; charset=gbk">
 <!-- {if $new_goods} --> 
<div class="clearfix">
<h3 class="RecNew f_l"></h3>
<a href="../search.php?intro=new"><span class="more f_r"></span></a>
</div>
<div class="LineOne"></div>
 <div class="RecNewContant clearfix" >
 <em class="TL"></em>
 <em class="TR"></em>
 <em class="BL"></em>
 <em class="BR"></em> 
 <div class="NewContant">
  <span class="scroL" ><p class="aa" onmouseover="clickLeft(); this.className='bb'"  onmouseout="scrollStop();this.className='aa'"></p></span>  
  <div class="scroMid">
      <div id="demo">
        <div id="demo1" style="float:left">
         <ul>
          <!--{foreach from=$new_goods item=goods}-->
           <li>
            <div class="goodsbox">
              <div class="imgbox"><a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name|escape:html}" /></a></div>
               <a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.short_style_name}</a><br />
               <!-- {if $goods.promote_price neq ""} -->
               <b class="shop">{$goods.promote_price}</b><br />
               <!-- {else}-->
              <b class="shop">{$goods.shop_price}</b><br />
               <!--{/if}-->
            </div>
           </li>
           <!--{/foreach}-->
         </ul>
     </div>
     <div id="demo2" style="display:inline; overflow:visible;"></div>
     </div>
    </div>
   <span class="scroR" ><p class="A1" onmouseover="clickRight(); this.className='A2'" onmouseout="scrollStop(); this.className='A1';"></p></span>
 </div> 
<!-- {/if} -->
<script type="text/javascript">
      function $(id){  
        return (document.getElementById) ? document.getElementById(id): document.all[id]
      }
      
      var boxwidth=152;//跟图片的实际尺寸相符
      
      var box=$("demo");
      var obox=$("demo1");
      var dulbox=$("demo2");
      obox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px';
      dulbox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px';
      box.style.width=obox.getElementsByTagName("li").length*boxwidth*3+'px';
      var canroll = false;
      if (obox.getElementsByTagName("li").length >=5) {
        canroll = true;
        dulbox.innerHTML=obox.innerHTML;
      }
      var step=5;temp=1;speed=50;
      var awidth=obox.offsetWidth;
      var mData=0;
      var isStop = 1;
      var dir = 1;
      
      function s(){
        if (!canroll) return;
        if (dir) {
      if((awidth+mData)>=0)
      {
      mData=mData-step;
      }
      else
      {
      mData=-step;
      }
      } else {
        if(mData>=0)
        {
        mData=-awidth;
        }
        else
        {
        mData+=step;
        }
      }
      
      obox.style.marginLeft=mData+"px";
      
      if (isStop) return;
      
      setTimeout(s,speed)
      }
      
      
      function moveLeft() {
          var wasStop = isStop;
          dir = 1;
          speed = 50;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      
      function moveRight() {
          var wasStop = isStop;
          dir = 0;
          speed = 50;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      
      function scrollStop() {
        isStop=1;
      }
      
      function clickLeft() {
          var wasStop = isStop;
          dir = 1;
          speed = 85;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      
      function clickRight() {
          var wasStop = isStop;
          dir = 0;
          speed = 85;
          isStop=0;
          if (wasStop) {
            setTimeout(s,speed);
          }
      }
      </script>
 </div>
 <div class="blank10"></div>

Answer 1

    <script src="js/jquery-1.3.2.js"></script>          $(document).ready(function(){
              setTimeout(scroll(),10);      
          });
          
          function scroll(){
              $("demo2").html($("demo1"));
              var left = $("demo").attr("scrollLeft");
              if(left<($("demo").width()-1)){
                $("demo").attr("scrollLeft",left+1);
               }else{
                 $("demo").attr("scrollLeft",0);
               }
               setTimeout(scroll(),10);
          }