首页 > 其他 > 详细

简单的轮播效果

时间:2016-08-31 18:27:52      阅读:148      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!