效果图：
代码如下：
<!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文件夹下，并正确命名，一个图片轮播就完成了。