zoukankan      html  css  js  c++  java
  • javascript图片轮换

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5 <title>简单的图片轮换</title>
    6 <style type="text/css">
    7 *{
    8 margin:0;
    9 padding:0;
    10 }
    11
    12 #banner{
    13 position:relative;
    14 width:954px;
    15 height:198px;
    16 margin:5px auto;
    17 border:2px solid #f00;
    18 }
    19 #banner div{
    20 position:absolute;
    21 }
    22 </style>
    23
    24 <script type="text/javascript">
    25 var minnum=1;//起始数
    26 var maxnum=3;//结束数
    27 var nownum=1;//当前数
    28 function changepic(){
    29 for(var i=minnum;i<=maxnum;i++){
    30 if(nownum==i)
    31 document.getElementById("mypic").src="images/banner_img"+i+".jpg";
    32 }
    33 nownum++;
    34 if(nownum==(maxnum+1)){
    35 nownum=1;
    36 }
    37 window.setTimeout(changepic,3000);
    38 }
    39
    40 </script>
    41 </head>
    42
    43 <body>
    44 <ul>
    45 <li id="banner">
    46 <div>
    47 <A href="#">
    48 <img src="images/banner_img1.gif" id="mypic"/>
    49 </A>
    50 </div>
    51 </li>
    52 </ul>
    53 </body>
    54 </html>

    这是一个简单的图片轮换代码.

    给img设置了id,在javascript中通过document.getElementById("").src得到img的路径,进行修改。

  • 相关阅读:
    SM2加解密代码示例
    RSA加解密代码示例
    base64加解密示例
    Hutool-数据类型转换
    Hutool工具-定时任务的使用
    Java面试题(5)mybatis、数据库
    Java面试题(4)Spring
    List、List<object>、List<?>三者的区别
    关于鉴权,看懂这篇就够了
    raft之一致性算法raft
  • 原文地址:https://www.cnblogs.com/zhangnanblog/p/2203266.html
Copyright © 2011-2022 走看看