js实现图片轮播特效

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .num{
        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;
        }
</style>
<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折封顶";
title[4]="5.十年店庆 名家跨界祝贺 珍藏签名本专区";
var now=1;
var end=5;
function show(d){
    if(Number(d)){
        clearInterval(time); //当触动按扭时，清除计时器
        now=d; //设当前显示图片
        time=setInterval('show()', 1000);
}
    for(var i=1;i<(end+1);i++){
    
                if(i==now){
                    document.getElementById('photo').src="topic/images/adRotator_"+i+".jpg";
                    document.getElementById("num"+i).innerHTML=title[i-1];
                    document.getElementById("num"+i).className="numberOver";
                    }
                    else{
                        document.getElementById("num"+i).innerHTML=i;
                        document.getElementById("num"+i).className="num";
                        }            
        }
        if(now==end){
            now=1;
            }
        else{
            now++;
            }
    }
var time=setInterval('show()', 1000);
window.onload=show;
</script>
</head>

<body>
<div class="one"><img src="topic/images/adRotator_1.jpg" id="photo"/>
    <div class="btn">
        <div class="num" id="num1" onclick="show(1)">1</div>
        <div class="num" id="num2" onclick="show(2)">2</div>
        <div class="num" id="num3" onclick="show(3)">3</div>
        <div class="num" id="num4" onclick="show(4)">4</div>
        <div class="num" id="num5" onclick="show(5)">5</div>
    </div>

</div>
</body>
</html>