<!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>
*{ margin:0; padding:0}
li{ list-style:none}
body{ background:#333}
#pic{ 400px; height:500px; position:relative; margin:40px auto; background:#fff; border:1px solid #fff}
#pic img{ 400px; height:500px;}
#pic span,#pic p{ position:absolute; left:0; background:#000; text-align:center; color:#fff; height:30px; line-height:30px; 100% }
#pic span{ top:0}
#pic p{ bottom:0 }
#pic ul{ position:absolute; 30px; top:0; right:-50px}
#pic ul li{ 30px; height:30px; background:#ccc; margin-bottom:10px}
#pic ul li.active{ background:#F60;}
</style>
<script>
window.οnlοad=function(){
var arrUrl=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrText=['第一张图','第二张图','第三张图','第四张图']
var oDiv=document.getElementById('pic');
var oImg=oDiv.getElementsByTagName('img')[0];
var oSpan=oDiv.getElementsByTagName('span')[0];
var oText=oDiv.getElementsByTagName('p')[0];
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
//初始化
var num=0;
for(var i=0; i<arrUrl.length; i++){
oUl.innerHTML+='<li></li>'
}
oImg.src=arrUrl[num];
oText.innerHTML=arrText[num];
oSpan.innerHTML=num+1+'/'+arrUrl.length;
aLi[num].className='active';
for(var i=0; i<aLi.length; i++){
aLi[i].index=i;
aLi[i].οnclick=function(){
oImg.src=arrUrl[this.index];
oText.innerHTML=arrText[this.index];
oSpan.innerHTML=this.index+1+'/'+arrUrl.length;
for(var i=0; i<aLi.length; i++){
aLi[i].className='';
}
this.className='active';
}
}
}
</script>
</head>
<body>
<div id="pic">
<img src="" />
<span>程序正在计算中</span>
<P>图片文字介绍</P>
<ul>
</ul>
</div>
</body>
</html>