zoukankan      html  css  js  c++  java
  • JS实例之图片轮播,实现图片播放效果

     1 <head>
     2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     3 <title>无标题文档</title>
     4 <style type="text/css">
     5 *{margin:0px auto;padding:0px;}
     6 #wai{width:500px;height:200px;}
     7 </style>
     8 </head>
     9 
    10 <body>
    11 <div id="wai">
    12     <img src="file:///D|/我的文档/图片收藏/6cd51674jw1e1q9gwhvwjj.jpg" class="img" width="500" height="200"/>
    13     <img src="file:///D|/我的文档/图片收藏/6cd51674jw1e3cddnbahhj.jpg" class="img" width="500" height="200" style="display:none";/>
    14 </div>
    15 </body>
    16 <script type="text/javascript">
    17 var suoyin=0;
    18 var img=document.getElementsByClassName("img");
    19 huan();
    20 function huan(){
    21     xianshi();
    22     if(suoyin>=img.length-1){
    23         suoyin=0;
    24     }else{
    25         suoyin++;
    26     }
    27     window.setTimeout("huan()",2000);
    28 }
    29 
    30 function xianshi(){
    31     for(var i=0;i<img.length;i++){
    32         img[i].style.display="none";
    33     }
    34     img[suoyin].style.display="block";
    35 }
    36 
    37 </script>
    38 </html>
  • 相关阅读:
    数组
    习题
    JAVA 实战练习
    JAVA语言基础——类型转换
    JAVA 语言基础——运算符
    JAVA语法基础——数据类型
    09.22函数,三局两胜
    09.22 猜拳一次
    09.21,函数,累加求和
    09.21,枚举
  • 原文地址:https://www.cnblogs.com/zym0m/p/7067005.html
Copyright © 2011-2022 走看看