切换图片

请看实例：

<div id="content">
    <!--上一张、下一张尽量用a标签，虽然其他标签也有:hover，但是在IE6下会有兼容性问题，用a:hover可以避免-->
    <a href="javascript:;" id="prev">&lt;</a>
    <a href="javascript:;" id="next">&gt;</a>
    <p id="text">文字正在加载中.....</p>
    <span id="span1">数量正在计算中.....</span>
    <img id="img1" />
</div>

window.onload=function (){
    var oPrev=document.getElementById("prev");
    var oNext=document.getElementById("next");
    var oText=document.getElementById("text");
    var oSpan=document.getElementById("span1");
    var oImg=document.getElementById("img1");
    var num=0;
    
    var arrUrl=["img/timg4.jpg","img/timg5.jpg","img/timg6.jpg","img/timg8.jpg","img/timg9.jpg"];
    var arrText=["只要不放弃就有希望","人生在于进步","有努力就有回报","抓住稳稳的幸福","最疯狂的事情"];
    
    //初始化
    function fnTab(){
        oText.innerHTML=arrText[num];
        oSpan.innerHTML=num+1+"/"+arrText.length;
        oImg.src=arrUrl[num];
    };
    fnTab();
    
    oPrev.onclick=function (){
        num--;
        if(num==-1){
            num=arrText.length-1;
        }
        fnTab();
    };
    
    oNext.onclick=function (){
        num++;
        if(num==arrText.length){
            num=0;
        }
        fnTab();
    };
};

body,div,a,p,span,img{margin:0;padding:0;}
#content{
    width:450px;
    height:400px;
    border:5px solid red;
    margin:30px auto;
    position:relative;
    overflow: hidden;
    background:#f1f1f1;
}
#content a{
    display:inline-block;
    width:30px;
    height:30px;
    border:2px solid yellow;
    background:#0000ff;
    line-height:30px;
    text-align: center;
    text-decoration:none;
    filter: alpha(opacity:40);
    opacity:0.4;
    position:absolute;
    top:188px;
    font-size: 20px;
    color:#fff;
}
#content a:hover{filter:alpha(opacity:80);opacity:0.8;}
#prev{left:10px;}
#next{right:10px;}
#text,#span1{
    position:absolute;
    left:0;
    height:30px;
    line-height:30px;
    width:450px;
    text-align: center;
    background: #000;
    filter:alpha(opacity:60);
    opacity: 0.6;
    color:#fff;
    font-size:14px;
}
#text{bottom:0;}
#span1{top:0;display:inline-block;}
#img1{display:block;width:450px;height:400px;border:none;}