<!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:0px;
padding:0px;
}
body{
background:#333;
}
.wrap{
width:400px;
height:600px;
position:relative;
border:1px #CCCCCC 5px;
margin-top:20px;
margin-right:60px;
float:left;
}
p,span{
width:400px;
height:30px;
background:#CCC;
text-align:center;
position:absolute;
opacity:0.8;
line-height:30px;
}
p{
top:0px;
}
span{
top:600px;
}
ul{
position:absolute;
top:650px;
left:150px;
}
ul li{
display:inline-block;
cursor:pointer;
background:#999;
width:15px;
height:15px;
position:relative;
margin-left:5px;
}
.mini{
height:60px;
width:40px;
border:2px #FFFFFF solid;
bottom:25px;
position:absolute;
}
.active{
background:#F60;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
fntab('wrap1',['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],['图片1','图片2','图片3','图片4'],'onclick');
fntab('wrap2',['img/2.jpg','img/3.jpg','img/4.jpg'],['图片2','图片3','图片4'],'onmouseover');
};
function fntab(id,arrurl,arrtext,evt)
{
var odiv = document.getElementById(id);
var oul = odiv.getElementsByTagName('ul')[0];
var oimg = odiv.getElementsByTagName('img')[0];
var ali = odiv.getElementsByTagName('li');
var op = odiv.getElementsByTagName('p')[0];
var ospan = odiv.getElementsByTagName('span')[0];
var i;
var num =0;
for( i = 0; i<arrurl.length; i++)
{
oul.innerHTML += '<li></li>';
}
//初始化
ali[num].className = 'active';
oimg.src = arrurl[num];
op.innerHTML = (num+1) + '/' + ali.length;
ospan.innerHTML = arrtext[num];
for(i = 0;i < ali.length; i++)
{
ali[i].index = i;
ali[i][evt] = function ()
{
for( var j = 0;j < ali.length; j++)
{
ali[j].className = '';
}
ali[this.index].className = 'active';
oimg.src = arrurl[this.index];
num = this.index;
op.innerHTML = (num+1) + '/' + ali.length;
ospan.innerHTML = arrtext[num];
};
}
};
</script>
</head>
<body>
<div class="wrap" id="wrap1">
<img id="img1" src="img/1.jpg">
<ul id="ul1">
</ul>
<p>正在加载页码...</p>
<span>正在加载描述信息...</span>
</div>
<div class="wrap" id="wrap2">
<img id="img1" src="img/1.jpg">
<ul id="ul1">
</ul>
<p>正在加载页码...</p>
<span>正在加载描述信息...</span>
</div>
</body>
</html>
