图片切换小demo 

 1 <body>
 2    <div class="body"><img src="bopin/images/bigImg1.jpg" width="524" height="190" border="2" alt="廣告圖片" id="Rotator"></div>
 3    <div class="bg">
 4    <div class="number" id="fig_1" onclick="show(1);">1</div>
 5    <div class="number" id="fig_2" onclick="show(2);">2</div>
 6    <div class="number" id="fig_3" onclick="show(3);">3</div>
 7    <div class="number" id="fig_4" onclick="show(4);">4</div>
 8    </div>
 9 </body>
10 
11 <script type="text/javascript">
12    var title=new Array();
13    title[0]="1.店慶第一波 限時搶購 一日三瘋！";
14    title[1]="2.十年店慶均價場 39/99/169專場！";
15    title[2]="3.全場69折封頂 享噹噹的超值低價！"
16    title[3]="4.店慶鉅獻 海量圖書69折封頂";
17 
18    var NowFrame=1; //最先顯示第一張圖片
19    var MaxFrame=4; //一共五張圖片
20    function show(d1){
21       if(Number(d1)){
22          clearTimeout(theTimer); //當觸動按鈕時，清除計時器
23          NowFrame=d1; //設當前顯示圖片
24       }
25    for(var i=1;i<(MaxFrame+1);i++){
26       if(i==NowFrame){
27          document.getElementById("Rotator").src="bopin/images/bigImg"+i+".jpg"; //顯示當前圖片
28          document.getElementById("fig_"+i).innerHTML=title[i-1]; //顯示當前圖片對應的標題
29          document.getElementById("fig_"+i).className="numberOver"; //設置當前標題的CSS樣式
30       }
31       else{
32          document.getElementById("fig_"+i).innerHTML=i;
33          document.getElementById("fig_"+i).className="number";
34       }
35    }
36 
37    if(NowFrame==MaxFrame){//設置下一個顯示的圖片
38       NowFrame=1;
39    }
40    else{
41       NowFrame++;
42    }
43    }
44 
45    var theTimer=setInterval('show()',3000); //設置定時器，顯示下一張圖片
46    window.onload=show; //頁面加載時運行函數show()
47 </script>

 

posted @ 2016-07-23 15:06  温故余学  阅读(131)  评论(0)  编辑  收藏  举报