javascript-图片横向无缝隙滚动

 <style type="text/css">
 <!--
 ul,li,div{margin:0; padding:0; font-size:12px;}
 #demo {
  width:678px; float:right; overflow:hidden;height:144px; border:none;
 }
 #indemo {
 float: left;
 width: 800%;
 }
 #demo1,#demo2{height:144px;float:left; display:inline-table;}
 #demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }
 #demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}
 #demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}
 #demo1 {
 float: left;
 }
 #demo2 {
 float: left;
 }
 -->
 </style>
 <div id="demo">
 <div id="indemo">
 <div id="demo1">
 <ul>
 <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
               <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
               <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
               <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
               <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
               <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
               <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
               <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
               <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
               <li><a href="#"><img  src="img/pro.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
 </ul>
 </div>
 <div id="demo2"></div>
 </div>
 </div>
 <script>
 <!--
 var speed=20; //数字越大速度越慢
 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></td>
       </tr>
     </table>

更多例子参加: http://www.111cn.net/js_a/js.html