1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 #wrap{width: 1000px;height: 200px;border: 1px solid red;overflow: hidden;margin: 100px auto;} 9 #con{width: 3000px;height: 200px;overflow: hidden;} 10 #con img{float: left;width: 200px;height: 200px;} 11 input{width: 50px;height: 50px;} 12 </style> 13 </head> 14 <body> 15 <div id="wrap"> 16 <div id="con"> 17 <img src="img/01.jpg" alt=""> 18 <img src="img/02.jpg" alt=""> 19 <img src="img/03.jpg" alt=""> 20 <img src="img/04.jpg" alt=""> 21 <img src="img/05.jpg" alt=""> 22 <img src="img/01.jpg" alt=""> 23 <img src="img/02.jpg" alt=""> 24 <img src="img/03.jpg" alt=""> 25 <img src="img/04.jpg" alt=""> 26 <img src="img/05.jpg" alt=""> 27 28 </div> 29 </div> 30 <input type="button" value="go"> 31 <input type="button" value="stop"> 32 33 <script> 34 var wrap=document.getElementById('wrap'); 35 var con=document.getElementById('con'); 36 var imgs=con.getElementsByTagName('img'); 37 var inp=document.getElementsByTagName('input'); 38 var imgw=imgs[0].offsetWidth; 39 var time1=null; 40 function timego() { 41 time1=setInterval(function() { 42 wrap.scrollLeft+=1; 43 if (wrap.scrollLeft>=imgw*5) { 44 wrap.scrollLeft=0; 45 }; 46 },10) 47 }; 48 //封装函数减少代码量，函数代表的是计时器的执行 49 50 timego();//进入页面自动执行； 51 wrap.onmouseover=function() { 52 clearInterval(time1); 53 }; 54 wrap.onmouseout=function() { 55 timego(); 56 }; 57 inp[0].onclick=function() { 58 clearInterval(time1); 59 timego(); 60 }; 61 inp[1].onclick=function() { 62 clearInterval(time1); 63 }; 64 </script> 65 </body> 66 </html>