效果：
代码：
1 <head runat="server"> 2 <title></title> 3 <style type="text/css"> 4 #div1 5 { 6 width: 245px; 7 height: 150px; 8 background: red; 9 margin: 250px; 10 margin-left: 500px; 11 position: absolute; 12 overflow: hidden; 13 } 14 #div1 ul li 15 { 16 float: left; 17 width: 44px; 18 height: 66px; 19 margin-top: 20px; 20 margin-right: 5px; 21 list-style: none; 22 } 23 #div1 ul 24 { 25 width: 250px; 26 position: absolute; 27 padding: 0; 28 } 29 </style> 30 <script type="text/javascript"> 31 window.onload = function () { 32 var oul = document.getElementsByTagName('ul')[0]; 33 var odiv = document.getElementById('div1'); 34 var ali = document.getElementsByTagName('li'); 35 oul.innerHTML = oul.innerHTML + oul.innerHTML; 36 oul.style.width = (ali[0].offsetWidth + 5) * ali.length + 'px'; 37 function roll() { 38 if (oul.offsetLeft <= -oul.offsetWidth / 2) { 39 oul.style.left = '0'; 40 } 41 oul.style.left = oul.offsetLeft - 2 + 'px'; 42 } 43 var timer = null; 44 timer = setInterval(roll, 30); 45 odiv.onmouseover = function () { 46 clearInterval(timer); 47 } 48 odiv.onmouseout = function () { 49 timer = setInterval(roll, 30); 50 } 51 }; 52 </script> 53 </head> 54 <body> 55 <div id="div1"> 56 <ul> 57 <li> 58 <img src="../Images/Number1/0.jpg" /></li> 59 <li> 60 <img src="../Images/Number1/1.jpg" /></li> 61 <li> 62 <img src="../Images/Number1/2.jpg" /></li> 63 <li> 64 <img src="../Images/Number1/3.jpg" /></li> 65 <li> 66 <img src="../Images/Number1/4.jpg" /></li> 67 </ul> 68 </div> 69 </body>