在网上找到了好几个的实现版本,觉得这个是最好的了。 <style type="text/css"> #demo {overflow:hidden;border: 1px dashed #CCC;width: 500px;} #demo img {border: 3px solid #F2F2F2;height:120px;width:120px;padding:0 5px 0 5px;} #indemo {float: left;width: 800%;height:120px;} #demo1 {float: left;height:120px;} #demo2 {float: left;} .ww{height:120px;float:left;text-align:center;} </style> <body> <div id="demo"> <div id="indemo"> <div id="demo1"> <div class="ww"> <img border="0" src="1.jpg" mce_src="1.jpg" /> </div> <div class="ww"> <img border="0" src="2.jpg" mce_src="2.jpg" /> </div> <div class="ww"> <img border="0" src="3.jpg" mce_src="3.jpg" /> </div> </div> <div id="demo2"></div> </div> </div> <script type="text/javascript"> var speed=6; //数字越大速度越慢 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.οnmοuseοver=function() {clearInterval(MyMar)}; tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}; </script>