1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style> 8 * 9 { 10 margin: 0; 11 padding: 0; 12 } 13 #all 14 { 15 width:1320px; 16 height:124px; 17 border:1px solid #ccc; 18 margin: 50px auto; 19 overflow: hidden; 20 } 21 #con 22 { 23 height: 124px; 24 width: 3000px; 25 overflow: hidden; 26 } 27 #con img 28 { 29 float: left; 30 width: 220px; 31 height: 124px; 32 } 33 input 34 { 35 margin: 30px 150px; 36 width: 50px; 37 height: 50px; 38 color: pink; 39 40 } 41 </style> 42 <body> 43 <div id="all"> 44 <div id="con"> 45 <img src="img/人物1.jpg" alt=""> 46 <img src="img/人物2.jpg" alt=""> 47 <img src="img/人物3.jpg" alt=""> 48 <img src="img/人物4.jpg" alt=""> 49 <img src="img/人物5.jpg" alt=""> 50 <img src="img/人物6.jpg" alt=""> 51 </div> 52 </div> 53 <input type="button" value="start"> 54 <input type="button" value="stop"> 55 56 <script> 57 var all=document.getElementById('all'); 58 var con=document.getElementById('con'); 59 var imgs=con.getElementsByTagName('img'); 60 var inp=document.getElementsByTagName('input'); 61 var timer=null; 62 con.innerHTML+=con.innerHTML;//实现图片内容的复制 63 function timego () { 64 timer=setInterval(function(){ 65 all.scrollLeft+=5; 66 if (all.scrollLeft==imgs[0].offsetWidth*6) { 67 all.scrollLeft=0; 68 }; 69 },50); 70 }; 71 timego(); 72 all.onmouseover=function() { 73 clearInterval(timer); 74 }; 75 all.onmouseout=function() { 76 timego(); 77 }; 78 inp[0].onclick=function() { 79 clearInterval(timer); 80 timego(); 81 }; 82 inp[1].onclick=function() { 83 clearInterval(timer); 84 }; 85 </script> 86 </body> 87 </html>