JavaScript实现带标题的图片轮播特效

 <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>

 <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>

 <script type="text/javascript"> // JavaScript Document//定义全局变量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 ="ad-0"+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>