<!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.οnlοad=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].οnclick=function(){

fnTab(this.index);

}

}

}


</script>

</head>


<body>


<div id="box">

<span>图片数量正在计算中...</span>

<p>说明文字正在加载中...</p>

<img src="" />

<ul></ul>

</div>


</body>

</html>