图片左右滚动的js代码

html代码

            
<div class="demo" id="demo" style="overflow:hidden; 660px; height:185px;" onmousemove="fnMouseOver();" onmouseout="fnMouseOut()">
                    <table border="0" align="center" cellpadding="1" cellspacing="1" cellspace="0">
                      <tbody><tr>
                        <td id="demo1" valign="top"><!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
                          <table width="1270" border="0" cellspacing="0" cellpadding="0">
                          
                            <tbody><tr align="center">
                        
                              <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                         
                              <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                         
                              <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                         
                              <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                             
                         <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                             
                         <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                             
                         <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                             
                         <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>  
                            </tr>
                            <tr>
                              <td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td>
                            </tr>
                          </tbody></table></td>
                          
                          
                        <td id="demo2" valign="top"><!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
                          <table width="1270" border="0" cellspacing="0" cellpadding="0">
                          
                            <tbody><tr align="center">
                        
                              <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                         
                              <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                         
                              <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                         
                              <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                             
                         <td width="150" height="157"><a href="http://www.baochem.com/" target="_blank"><img src="./上海市化工行业协会_files/20121031155517354.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                             
                         <td width="150" height="157"><a href="http://www.scip.com.cn/" target="_blank"><img src="./上海市化工行业协会_files/20121091658886.gif" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                             
                         <td width="150" height="157"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht" target="_blank"><img src="./上海市化工行业协会_files/20121031152142719.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                             
                         <td width="150" height="157"><a href="http://www.spc.com.cn/cnspc/" target="_blank"><img src="./上海市化工行业协会_files/20121031141213497.jpg" width="150" height="157" border="0"></a></td>
                              <td width="3" height="157"></td>
                         
                            </tr>
                            <tr>
                              <td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.baochem.com/">上海宝钢化工有限公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.scip.com.cn/">上海化工区</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.sinopec.com/about_sinopec/subsidiaries/refinery_petrochemical/20110302/14150.sht">中石化上海高桥分公司</a></td>
                              <td width="3" height="30" align="center"></td>
                              <td width="150" height="30" align="center"><a href="http://www.spc.com.cn/cnspc/">上海石化股份有限公司</a></td>
                            </tr>
                    
                          </tbody></table></td>
                      </tr>
                    </tbody></table>
                  </div>

js代码

                    <script type="text/javascript"> 
                    var speed=30;
                    var demo = $("#demo");
                    var demo1 = $("#demo1");
                    var demo2 = $("#demo2");
                    demo2.html(demo1.html());
                    function Marquee(){ 
                        if(demo.scrollLeft()>=demo1.width())
                            demo.scrollLeft(0); 
                        else{
                            demo.scrollLeft(demo.scrollLeft()+1);
                        }
                    } 
                    var MyMar=setInterval(Marquee,speed) 
                    function fnMouseOver() {
                        clearInterval(MyMar);
                    }
                    function fnMouseOut() {
                        MyMar=setInterval(Marquee,speed);
                    }
                    function fnPre() {
                        for(var i=0;i<20;i++){
                            if(demo.scrollLeft()>=demo1.width())
                                demo.scrollLeft(0); 
                            else{
                                demo.scrollLeft(demo.scrollLeft()+5);
                            }
                        }
                    }
                    function fnBack() {
                        //alert(demo1.width());
                        for(var i=0;i<20;i++){
                            if(demo.scrollLeft()<=0)
                                demo.scrollLeft(demo1.width()); 
                            else{
                                demo.scrollLeft(demo.scrollLeft()-5);
                            }
                        }
                    }
                    </script>