.datu{
width:504px;
height:480px;cursor:pointer;}
.datu img{
width:504px;
height:480px;}
.xiaotu{
width:504px;
height:70px;}
.xiaotu ul{
list-style:none;padding-top:3px;}
.xiaotu ul li{
float:left;
width:58px;
height:58px;
overflow: hidden;
border:2px solid #EFEDEE;
cursor:pointer;}
.xiaotu ul li img{
width:63px;
height:63px;}
<script type="text/javascript">
function changeImg(url)
{
var bigimg = document.getElementById("myimg");
bigimg.src=url;
}
</script>
<div class="datu">
<img src="images/datu0.jpg" id="myimg"/>
</div>
<div class="xiaotu">
<ul>
<li><img src="images/datu0.jpg" οnmοuseοver="changeImg(this.src)"/></li>
<li><img src="images/datu1.jpg" οnmοuseοver="changeImg(this.src)"/></li>
<li><img src="images/datu2.jpg" οnmοuseοver="changeImg(this.src)"></li>
<li><img src="images/datu3.jpg" οnmοuseοver="changeImg(this.src)"/></li>
<li><img src="images/datu4.jpg" οnmοuseοver="changeImg(this.src)"/></li>
<li><img src="images/datu5.jpg" οnmοuseοver="changeImg(this.src)"/></li>
<ul>
</div>