码迷,mamicode.com
首页 > 其他好文 > 详细

简单的轮播效果

时间:2016-08-31 18:29:41      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

 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>

 

简单的轮播效果

标签:

原文地址:http://www.cnblogs.com/Kqingniao/p/5826756.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!