1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>图片滚动</title> 6 </head> 7 <body> 8 <style type="text/css"> 9 <!-- 10 #demo { 11 background: #FFF; 12 overflow:hidden; 13 border: 1px dashed #CCC; 14 500px; 15 } 16 #demo img { 17 border: 3px solid #F2F2F2; 18 } 19 #indemo { 20 float: left; 21 800%; 22 } 23 #demo1 { 24 float: left; 25 } 26 #demo2 { 27 float: left; 28 } 29 --> 30 </style> 31 <div id="demo"> 32 <div id="indemo"> 33 <div id="demo1"> 34 <a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a> 35 <a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a> 36 <a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a> 37 <a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a> 38 <a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a> 39 <a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></a> 40 </div> 41 <div id="demo2"></div> 42 </div> 43 </div> 44 <script> 45 <!-- 46 var speed=10; 47 var tab=document.getElementById("demo"); 48 var tab1=document.getElementById("demo1"); 49 var tab2=document.getElementById("demo2"); 50 tab2.innerHTML=tab1.innerHTML; 51 function Marquee(){ 52 if(tab2.offsetWidth-tab.scrollLeft<=0) 53 tab.scrollLeft-=tab1.offsetWidth 54 else{ 55 tab.scrollLeft++; 56 } 57 } 58 var MyMar=setInterval(Marquee,speed); 59 tab.onmouseover=function() {clearInterval(MyMar)}; 60 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; 61 --> 62 </script> 63 </body> 64 </html>