<!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,li{
list-style:none;
margin:0px;
padding:0px;
}
p{margin:0px;}
#box{
width:400px;
height:500px;
position:relative;
margin:0px auto;
}
#box img{
width:400px;
height:500px;
background:url(课件及作业/img/loader_ico.gif) no-repeat center;
}
#box span,#box p{
width:400px;
height:30px;
text-align:center;
line-height:30px;
background-color:#000000;
color:#FFFFFF;
font-size:20px;
position:absolute;
left:0px;
}
#box span{top:0px;}
#box p{bottom:0px;}
#box ul{
width:40px;
height:auto;
position:absolute;
left:-45px;
top:0px;
}
#box ul li{
width:40px;
height:40px;
background-color:#999999;
margin-top:5px;
}
#box .ys{
width:30px;
height:30px;
background-color:#CCCCCC;
border:5px solid #000000;
}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById(‘box‘);
var oSp=oBox.getElementsByTagName(‘span‘)[0];
var oP=oBox.getElementsByTagName(‘p‘)[0];
var oImg=oBox.getElementsByTagName(‘img‘)[0];
var oUl=oBox.getElementsByTagName(‘ul‘)[0];
var aLi=oUl.getElementsByTagName(‘li‘);
var arrImg=[‘img_/1.png‘,‘img_/2.png‘,‘img_/3.png‘,‘img_/4.png‘];
var arrTxt=[‘黑色老鹰‘,‘蓝妖女‘,‘美女‘,‘面具侠‘];
var num=0;
var ls=arrImg.length;
for(var i=0;i<ls;i++){
oUl.innerHTML+=‘<li></li>‘;
}
function fnTab(num){
oSp.innerHTML=num+1+‘/‘+ls;
oP.innerHTML=arrTxt[num];
oImg.src=arrImg[num];
for(var a=0;a<ls;a++){
aLi[a].className=‘‘;
}
aLi[num].className=‘ys‘;
}
fnTab(num);
for(var s=0;s<ls;s++){
aLi[s].index=s;
aLi[s].onclick=function(){
fnTab(this.index);
}
}
}
</script>
</head>
<body>
<div id="box">
<span>图片数量正在计算中...</span>
<p>说明文字正在加载中...</p>
<img src="" />
<ul></ul>
</div>
</body>
</html>