简单的轮播效果

最新推荐文章于 2021-04-23 11:38:02 发布

dfdfxh77951

最新推荐文章于 2021-04-23 11:38:02 发布

阅读量83

点赞数

原文链接：http://www.cnblogs.com/Kqingniao/p/5826756.html

版权

 1 <!DOCTYPE html>
 2     <html>
 3     <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>无标题文档</title>
 6     <style type="text/css">
 7     #tab { overflow:hidden; width:400px; height:250px; position:relative; float:left;}
 8     #tab>img:not(:first-child){ display:none; }
 9  
10     </style>
11     <script>
12         window.onload = function(){
13      
14             var images = document.getElementsByTagName('img');
15             var pos = 0;
16             var len = images.length;
17          
18             setInterval(function(){
19          
20                 images[pos].style.display = 'none';
21                 pos = ++pos == len ? 0 : pos;
22                 images[pos].style.display = 'inline';
23          
24             },1000);
25          
26         };
27     </script>
28  
29     </head>
30  
31     <body>
32     <div id="tab">
33         <img src="img/01.jpg" width="400" height="250"/>
34         <img src="img/02.jpg" width="400" height="250"/>
35         <img src="img/03.jpg" width="400" height="250"/>
36     </div>
37     </body>
38     </html>