实现Banner广告图片轮换 

 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>

 

posted @ 2017-10-22 09:31  木&子  阅读(217)  评论(0)    收藏  举报