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>
