JavaScript實現(xiàn)帶標(biāo)題的圖片輪播特效

更新時間：2015年05月20日 08:50:15 投稿：hebedich

這里給大家分享的是4屏帶標(biāo)題和文字描述的js圖片輪播代碼，完美兼容IE6。圖片滾動切換，鼠標(biāo)放到數(shù)字選項卡即可切換圖片。點擊圖片跳轉(zhuǎn)到指定頁面，有需要的小伙伴可以參考下。

圖片輪播，在一些購物網(wǎng)站上運用的不勝枚舉，下面簡單介紹一下圖片輪播的實現(xiàn)。

如圖

CSS代碼：

 <style type="text/css">
 
.body{
  width:524px;
  border:solid 1px #666;
  margin-left:auto;
  margin-right:auto;
  }
 .bg{
    background-color:#E0E0E0;
    height:20px;
    border-top:solid 1px #B4B4B4;
    }
  .number{
    font-size: 14px;
    font-weight: bold;
    color: #FFF;
    background-color: #9E2E07;
    display: block;
    border: 1px solid #FFF;
    width:18px;
    height:18px;
    text-align: center;
    margin-left:10px;
    cursor:pointer;
    float:left;
    }
  .numberOver{
    color:#8C2806;
    font-size:14px;
    width:280px;
    background-color:#FFF;
    text-align:center;
    float:left;
    display: block;
    margin-left:10px;
    }
.main{
  width:95%;
  margin-left:auto;
  margin-right:auto;
  }
  .left_indent{
    padding-left:20px;
    }
  .red{
    color:#F00;
    }
 </style>

HTML代碼：

 <div class="body"><img src="ad-01.jpg" width="524" height="190" border="0" alt="廣告圖片" id="Rotator">
 <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>
 </div>

JS代碼：

 <script type="text/javascript">
 // JavaScript Document
//定義全局變量
var title=new Array();
title[0]="1.店慶第一波 限時搶購 一日三瘋！";
title[1]="2.十年店慶均價場 39/99/169專場！";
title[2]="3.全場69折封頂 享當(dāng)當(dāng)?shù)某档蛢r！";
title[3]="4.店慶鉅獻 海量圖書69折封頂";

var NowFrame = 1;  //最先顯示第一張圖片
var MaxFrame = 4;  //一共五張圖片
function show(d1) {
  if(Number(d1)){
    clearTimeout(theTimer); //當(dāng)觸動按扭時，清除計時器
    NowFrame=d1;        //設(shè)當(dāng)前顯示圖片
    }
  for(var i=1;i<(MaxFrame+1);i++){
    if(i==NowFrame){
      
      document.getElementById("Rotator").src ="ad-0"+i+".jpg";  //顯示當(dāng)前圖片
      document.getElementById("fig_"+i).innerHTML=title[i-1];    //顯示當(dāng)前圖片對應(yīng)的標(biāo)題
      document.getElementById("fig_"+i).className="numberOver";  //設(shè)置當(dāng)前標(biāo)題的CSS樣式
     }
     else{
     document.getElementById("fig_"+i).innerHTML=i;
     document.getElementById("fig_"+i).className="number";
     }
  }
  if(NowFrame == MaxFrame){  //設(shè)置下一個顯示的圖片
    NowFrame = 1;
    }
  else{
    NowFrame++;
    }
}
var theTimer=setInterval('show()', 3000);  //設(shè)置定時器，顯示下一張圖片
window.onload=show;  //頁面加載時運行函數(shù)show()

</script>

以上所述就是本文給大家分享的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: