图片的滚动向左

<script type="text/javascript">
    function MyFun() {
        var speed = 30; //数字越大速度越慢 
        var tab = document.getElementById("demo");
        var tab1 = document.getElementById("demo1");
        var tab2 = document.getElementById("demo2");
        tab2.innerHTML = tab1.innerHTML;
        function Marquee() {
            if (tab2.offsetWidth - tab.scrollLeft <= 0)
                tab.scrollLeft -= tab1.offsetWidth
            else {
                tab.scrollLeft++;
            }
        }
        var MyMar = setInterval(Marquee, speed);
        tab.onmouseover = function() { clearInterval(MyMar) };
        tab.onmouseout = function() { MyMar = setInterval(Marquee, speed) };
    }
   

</script> 

CSS

.prod li{  width:181px; text-align:center; height:125px; padding-right:5px; padding-top:1px; float:left; margin-left:16px; background: url(../images/pro_img_bg.gif) no-repeat;}/**产品图片列表样式*/
#demo {
    overflow:hidden;
   
     width:940px;
    }
 
    #indemo {
     float: left;
     width: 1000%;
    }
    #demo1 {
     float: left;
    }
    #demo2 {
     float: left;
    }
    

  <ul class="prod">
       <div id="demo">
    <div id="indemo">
    <div id="demo1">
    <a href="jiaoxue.php?id=77"><img src="userfiles/20120826193133.jpg" width="178" height="97"></a>
 
<a href="jiaoxue.php?id=77">安装磁极吊具</a>
 </li><li>
<a href="jiaoxue.php?id=79"><img src="userfiles/20120826192604.jpg" width="178" height="97"></a>
 
<a href="jiaoxue.php?id=79">清扫及检查</a>
 </li><li>
<a href="jiaoxue.php?id=80"><img src="userfiles/20120828025512.jpg" width="178" height="97"></a>
 
<a href="jiaoxue.php?id=80">拆除下部吊具</a>
 </li>
  </div>
    <div id="demo2"></div>
    </div>
    </div>
 </ul>