JavaScript图片轮播，举一反三

图片轮播，在一些购物网站上运用的不胜枚举，下面简单介绍一下图片轮播的实现。
如图
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>图片乱拨</title>
  <style type="text/css">
  
.body{
    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;
        18px;
        height:18px;
        text-align: center;
        margin-left:10px;
        cursor:pointer;
        float:left;
        }
    .numberOver{
        color:#8C2806;
        font-size:14px;
        280px;
        background-color:#FFF;
        text-align:center;
        float:left;
        display: block;
        margin-left:10px;
        }
.main{
    95%;
    margin-left:auto;
    margin-right:auto;
    }
    .left_indent{
        padding-left:20px;
        }
    .red{
        color:#F00;
        }

  
  
  </style>
 </head>
 <body>
 <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>
 </body>
 <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>
</html>