首頁 > 開發者 > 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的路徑，進行修改。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
