zoukankan      html  css  js  c++  java
  • 实现Banner广告图片轮换

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>Insert title here</title>
     6 <style type="text/css">
     7     body{text-align: center;}
     8     div{ margin: 100px auto; width:790px; position: relative;}
     9     .nav{position: absolute;right: 19px;left: auto;bottom: 8px; top: auto;}
    10     .nav a{background-color: red; padding: 2px 5px; border-radius:50%; text-decoration:none;}
    11 </style>
    12 </head>
    13 <body>
    14 <div>
    15 <a></a>
    16     <img id="1" width="790px" height="340px" alt="" src="59a7a48aN7a42d3fe.jpg" style="display:block">
    17     <img id="2" width="790px" height="340px"  alt="" src="59cc929fNaebef801.jpg"style="display:none">
    18     <img id="3" width="790px" height="340px" alt="" src="59ccc986Nbf17e33e.jpg" style="display:none">
    19     <img id="4" width="790px" height="340px" alt="" src="59ccec77N64688a8d.jpg" style="display:none">
    20     
    21     <div class="nav">
    22         <a href="#" onmouseover="show(1)">1</a>
    23         <a href="#" onmouseover="show(2)">2</a>
    24         <a href="#" onmouseover="show(3)">3</a>
    25         <a href="#" onmouseover="show(4)">4</a>
    26     </div>
    27     
    28     
    29 </div>
    30 </body>
    31 <script type="text/javascript">
    32     var num=1;
    33     function show(n){
    34         if (!isNaN(Number(n))) {
    35             window.clearTimeout(time);
    36             num=n;
    37         }
    38         
    39         var images=document.getElementsByTagName("img");
    40         for(var i=0;i<images.length;i++){
    41             if(images[i].id==num){
    42                 images[i].style.display="block";
    43                 
    44             }else{
    45                 images[i].style.display="none";
    46             }
    47         }
    48         if(num==4){
    49             num=1;
    50         }else{
    51             num++;    
    52         }    
    53         
    54      time=window.setTimeout("show()",2000);
    55     }
    56 show();
    57 </script>
    58 </html>
  • 相关阅读:
    Linux进程关系
    ambari 卸载脚本
    CentOS-7.2安装Ambari-2.6.1
    MYSQL57密码策略修改
    CentOS7 离线安装MySQL
    centos 安装mysql Package: akonadi-mysql-1.9.2-4.el7.x86_64 (@anaconda)
    mysql 数据备份
    spring-boot-starter-thymeleaf对没有结束符的HTML5标签解析出错
    ssh: scp命令
    python:os.path
  • 原文地址:https://www.cnblogs.com/lyxcode/p/7707844.html
Copyright © 2011-2022 走看看