图片轮播

效果图：
代码如下：
<!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=gb2312" />
<title>无标题文档</title>
    <style>
        ul{margin:0;pading:0;}
        li{list-style:none;}
        body{background:#333;}
        #pic{width:400px;height:500px;position:relative;margin:0  auto;background:url(img/loader_ico.gif) no-repeat center #fff;}
        #pic img{width:400px;height:500px;}
        #pic ul{width:40px;position:absolute;top:0;right:-50px;}
        #pic li{width:40px;height:40px;margin-bottom:4px;background:#666;}
        #pic .active{background:#FC3;}
        #pic span{top:0;}
        #pic p{bottom:0;margin:0;}
        #pic p,#pic span{position:absolute;width:400px;height:30px;line-height:30px;text-align:center;color:#fff;background:#000;}
        
    </style>
</head>
    <script>
        window.onload=function (){
            var oDiv=document.getElementById('pic');
            var oImg=oDiv.getElementsByTagName('img')[0];
            var oSpan=oDiv.getElementsByTagName('span')[0];
            var oP=oDiv.getElementsByTagName('p')[0];
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');
            var arrUrl=['img/1.png','img/2.png','img/3.png','img/4.png'];
            var arrText=['小宠物','图片二','图片三','面具'];
            var num=0;
            
            for(var i=0;i<arrUrl.length;i++){
                oUl.innerHTML+='<li></li>';
            }
            //初始化
            oImg.src=arrUrl[num];
            oSpan.innerHTML=1+num+'/'+arrUrl.length;
            oP.innerHTML=arrText[num];
            aLi[num].className='active';
            
            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;
                aLi[i].onclick=function(){
                    ///alert(this.index);
                    oImg.src=arrUrl[this.index];
                    oP.innerHTML=arrText[this.index];
                    oSpan.innerHTML=1+this.index+'/'+arrText.length;
                    
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].className='';
                    }
                    this.className='active';
                }
            }
        }
    </script>
<body>
    <div id="pic">
        <img src=""/>
        <span>数量在加载中。。。。</span>
        <p>文字说明正在加载中。。。。</p>
        <ul>
        </ul>
    </div>
</body>
</html>
只要把图片放在img文件夹下，并正确命名，一个图片轮播就完成了。
图片轮播

推荐阅读
