zoukankan      html  css  js  c++  java
  • 简单的轮播效果

     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>
  • 相关阅读:
    WC命令
    dcoker machine
    linux命令
    Valgrind 检测程序内存使用
    golang flag
    面试之---二叉树的遍历
    FFMpeg 版本错误
    C++中namespace的使用
    QT之QStatusBar
    建立ftp服务器和客户端
  • 原文地址:https://www.cnblogs.com/Kqingniao/p/5826756.html
Copyright © 2011-2022 走看看