图片切换小demo

开发者程哲技术 2022年11月19日

0 收藏 361 点赞 4,055 浏览 1203 个字

 <body>
    <div class="body"><img src="bopin/images/bigImg1.jpg" width="524" height="190" border="2" alt="廣告圖片" id="Rotator"></div>
    <div class="bg">
    <div class="number" id="fig_1" onclick="show(1);">1</div>
    <div class="number" id="fig_2" onclick="show(2);">2</div>
    <div class="number" id="fig_3" onclick="show(3);">3</div>
    <div class="number" id="fig_4" onclick="show(4);">4</div>
    </div>
 </body> <script type="text/javascript">
    var title=new Array();
    title[0]="1.店慶第一波 限時搶購 一日三瘋！";
    title[1]="2.十年店慶均價場 39/99/169專場！";
    title[2]="3.全場69折封頂 享噹噹的超值低價！"
    title[3]="4.店慶鉅獻 海量圖書69折封頂";    var NowFrame=1; //最先顯示第一張圖片
    var MaxFrame=4; //一共五張圖片
    function show(d1){
       if(Number(d1)){
          clearTimeout(theTimer); //當觸動按鈕時，清除計時器
          NowFrame=d1; //設當前顯示圖片
       }
    for(var i=1;i<(MaxFrame+1);i++){
       if(i==NowFrame){
          document.getElementById("Rotator").src="bopin/images/bigImg"+i+".jpg"; //顯示當前圖片
          document.getElementById("fig_"+i).innerHTML=title[i-1]; //顯示當前圖片對應的標題
          document.getElementById("fig_"+i).className="numberOver"; //設置當前標題的CSS樣式
       }
       else{
          document.getElementById("fig_"+i).innerHTML=i;
          document.getElementById("fig_"+i).className="number";
       }
    }    if(NowFrame==MaxFrame){//設置下一個顯示的圖片
       NowFrame=1;
    }
    else{
       NowFrame++;
    }
    }    var theTimer=setInterval('show()',3000); //設置定時器，顯示下一張圖片
    window.onload=show; //頁面加載時運行函數show()
 </script>