<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul,ol{list-style:none;}
#box {
position:relative;
margin:100px auto;
border:1px solid #ccc;
360px;
height:432px;
}
#box ul{
overflow: hidden;
border-top:1px solid #ccc;
position:absolute;
top:360px;
left:0;
360px;
}
#box li {
float: left;
border-top:none;
}
.bigImg{
360px;
height:360px;
background:red;
}
.bigImg li{
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="box">
<ol class="bigImg" id="top">
<li class="content"><img src="images/01big.jpg" alt=""/></li>
<li class="content"><img src="images/02big.jpg" alt=""/></li>
<li class="content"><img src="images/03big.jpg" alt=""/></li>
<li class="content"><img src="images/04big.jpg" alt=""/></li>
<li class="content"><img src="images/05big.jpg" alt=""/></li>
</ol>
<ul id="bottom">
<li class="smallpic"><img src="images/01.jpg" alt=""/></li>
<li class="smallpic"><img src="images/02.jpg" alt=""/></li>
<li class="smallpic"><img src="images/03.jpg" alt=""/></li>
<li class="smallpic"><img src="images/04.jpg" alt=""/></li>
<li class="smallpic"><img src="images/05.jpg" alt=""/></li>
</ul>
</div>
</body>
</html>
<script>
var bts = document.getElementsByClassName("smallpic");
var cons = document.getElementsByClassName("content");
for( var i = 0 ; i < bts.length ; i++ ){
bts[i].index = i;
bts[i].onmouseover = function(){
for( var j = 0 ; j <bts.length ; j++ ){
cons[j].style.display = "none";
}
cons[ this.index ].style.display = "block";
}
}
</script>