一只人的异想世界：关注生活，关注网络

<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>

提示：你可以先修改部分代码再运行。