<html>
<head>
<meta name="name" content="content"charset="utf-8"/>
<style type="text/css" media="screen">
#main{ width: 800px;height: 300px;margin: 0 auto;position: relative;}
#main .list{z-index: 10;}
#main .list li{position: absolute;width: 800px;height: 300px;background: #ccc;list-style: none}
#main .bt{ z-index: 200;position: absolute;bottom: 10px;right: 10px;}
#main .bt li{list-style: none;float: left;width: 40px;height: 40px;border: 1px solid #ccc;text-align: center;line-height: 40px;}
#main .bt li:hover{background:#ccc}
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function () {
var bt=document.getElementsByTagName('ul')[1];
var btli=bt.getElementsByTagName('li');
var list=document.getElementsByTagName('ul')[0];
var lis=list.getElementsByTagName('li');
var index=5;
lis[0].style.zIndex=index;
for (var i = 0; i < btli.length; i++) {
btli[i].index=i;
btli[i].onmouseover=function () {
lis[this.index].style.zIndex=index;
index++;
}
btli[i].onmouseout=function () {
lis[0].style.zIndex=index;
index++;
} };
}
</script>
<title></title>
</head>
<body>
<div id="main">
<ul class="list">
<li style="background: #f00;"></li>
<li style="background: #ff0"></li>
<li style="background: #f0f"> </li>
<li style="background: #fcc"></li>
</ul>
<div class="bt">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div><!-- / --> </div>
</body>
</html>
闲着没事写的一段javascript代码。