【筆記——web】幻燈片效果實現

網頁上的幻燈片，記錄一下，早就想學了，提供一個最簡單的幻燈片製做方法，純手工製品

先放效果

 

如下是現實說明：

1、如下是html代碼，ul裏面的是圖上橙色、灰色的按鈕，Img就是那些用於幻燈顯示的圖片

 1   <div id="pic">
 2     <div id="button-back">
 3       <ul>
 4         <li class="btnb" onClick="cli(1)" ></li>
 5         <li class="btn" onClick="cli(2)" ></li>       
 6           <li class="btn" onClick="cli(3)" ></li>
 7       </ul>
 8     </div>
 9     <img id="img-one" src="images/index/01.gif" width="1350" height="449"/>
10     <img id="img-two" src="images/index/02.gif" width="1350" height="449" />   
11     <img id="img-three" src="images/index/03.gif" width="1350" height="449" />
12     </div>

2、css代碼，按鈕和圖片都要使用絕對佈局讓他浮起來

 1 #pic{
 2     background-image: url(../images/02.gif);
 3     width: 1349px;
 4     height: 466px;
 5     margin: auto;
 6 }
 7 
 8 #pic img{
 9     position:absolute;
10 }
11 
12 #button-back{
13     width:103px;
14     height:25px;
15     position:absolute;
16     z-index:1;
17     margin-top:412px;
18     margin-left:637px;
19     background-image:url(../images/index/12.gif);
20 }
21 #button-back ul{
22     margin-left:9px;
23 
24 }
25 #button-back ul li{
26     width:18px;
27     height:18px;
28     margin-left:8px;
29     margin-top:4px;
30 }
31 
32 .btn{
33     background-image:url(../images/index/b.gif);
34 }
35 
36 .btnb{
37     background-image:url(../images/index/bb.gif);
38 }

3、js代碼，大概意思是使用setInterval()定時器來重複調用changeFlage()方法，changeFlage()是用來改變標誌位的，而後經過調用changeImg方法根據標誌位flage來改變圖片，改變效果經過jquery實現，一樣鼠標點擊按鈕也是改變標誌位，而後改變圖片

 1 var img = document.getElementById("pic").getElementsByTagName("img");
 2     var lis = document.getElementById("button-back").getElementsByTagName("li");
 3     
 4     var flage = 2;
 5     
 6     //速度設置
 7     var fast = 1000;
 8     var slow = 1200;
 9     var time = 4000;
10     
11     //進行一次變換
12     img[0].hidden = false;
13     img[1].hidden = true;
14     img[2].hidden = true;
15     
16     //週期調用改變標誌函數
17     setInterval("changeFlage()",time);
18     
19     //改變標誌
20     function changeFlage(){
21         chagneImg();
22         if(flage >= 3){
23             flage = 1;
24         }else{
25             flage ++;
26         }
27     }
28     
29     //待測試，用於隨機幻燈效果
30     function tx(img1,img2,img3){
31         var ran = Math.ceil(1);
32         if(ran == 0){
33             img1.fadeIn(fast);
34             img2.fadeOut(fast);
35             img3.fadeOut(fast);
36         }else if(ran == 1){
37             img1.slideUp(fast);
38             img2.slideDown(fast);
39             img3.slideDown(fast);
40         }
41     }
42     
43     //改變圖片
44     function chagneImg(){
45         switch(flage){
46             case 1:
47                 /*img[0].hidden = false;
48                 img[1].hidden = true;
49                 img[2].hidden = true;*/
50 
51                 $("#img-one").fadeIn(fast);
52                 $("#img-two").fadeOut(slow);
53                 $("#img-three").fadeOut(slow);
54 
55                 /*tx($("#img-one"),$("#img-two"),$("#img-three"));                */
56                 lis[0].className = "btnb";
57                 lis[1].className = "btn";
58                 lis[2].className = "btn";
59                 break;
60             case 2:
61                 /*img[0].hidden = true;
62                 img[1].hidden = false;
63                 img[2].hidden = true;*/
64                 
65                 $("#img-one").fadeOut(slow);
66                 $("#img-two").fadeIn(fast);
67                 $("#img-three").fadeOut(slow);
68                 
69                 /*tx($("#img-two"),$("#img-one"),$("#img-three"));*/
70                 lis[0].className = "btn";
71                 lis[1].className = "btnb";
72                 lis[2].className = "btn";
73                 break;
74             case 3:
75                 /*img[0].hidden = true;
76                 img[1].hidden = true;
77                 img[2].hidden = false;*/
78                 
79                 $("#img-one").fadeOut(slow);
80                 $("#img-two").fadeOut(slow);
81                 $("#img-three").fadeIn(fast);
82                 
83                 /*tx($("#img-three"),$("#img-two"),$("#img-one"));*/
84                 lis[0].className = "btn";
85                 lis[1].className = "btn";
86                 lis[2].className = "btnb";                
87                 break;
88         }
89     }
90     
91     //點擊按鈕
92     function cli(n){
93         flage = n;
94         chagneImg();
95     }