简单的轮播效果

Posted 2020-08-05 K_青鸟丶

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的轮播效果相关的知识，希望对你有一定的参考价值。

 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>

以上是关于简单的轮播效果的主要内容，如果未能解决你的问题，请参考以下文章