1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 body{text-align: center;} 8 div{ margin: 100px auto; width:790px; position: relative;} 9 .nav{position: absolute;right: 19px;left: auto;bottom: 8px; top: auto;} 10 .nav a{background-color: red; padding: 2px 5px; border-radius:50%; text-decoration:none;} 11 </style> 12 </head> 13 <body> 14 <div> 15 <a></a> 16 <img id="1" width="790px" height="340px" alt="" src="59a7a48aN7a42d3fe.jpg" style="display:block"> 17 <img id="2" width="790px" height="340px" alt="" src="59cc929fNaebef801.jpg"style="display:none"> 18 <img id="3" width="790px" height="340px" alt="" src="59ccc986Nbf17e33e.jpg" style="display:none"> 19 <img id="4" width="790px" height="340px" alt="" src="59ccec77N64688a8d.jpg" style="display:none"> 20 21 <div class="nav"> 22 <a href="#" onmouseover="show(1)">1</a> 23 <a href="#" onmouseover="show(2)">2</a> 24 <a href="#" onmouseover="show(3)">3</a> 25 <a href="#" onmouseover="show(4)">4</a> 26 </div> 27 28 29 </div> 30 </body> 31 <script type="text/javascript"> 32 var num=1; 33 function show(n){ 34 if (!isNaN(Number(n))) { 35 window.clearTimeout(time); 36 num=n; 37 } 38 39 var images=document.getElementsByTagName("img"); 40 for(var i=0;i<images.length;i++){ 41 if(images[i].id==num){ 42 images[i].style.display="block"; 43 44 }else{ 45 images[i].style.display="none"; 46 } 47 } 48 if(num==4){ 49 num=1; 50 }else{ 51 num++; 52 } 53 54 time=window.setTimeout("show()",2000); 55 } 56 show(); 57 </script> 58 </html>