js触碰小图换大图

 .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>