1、具体代码：
<title>大小图切换</title>
<script>
window.onload=function(){
var ip = document.getElementById("ni");
var img = ip.getElementsByTagName("img");
for (var i = 0; i < img.length; i++) {
img[i].onmousemove= function(){
var big = document.getElementById("wo");
big.src= this.getAttribute("data");
}
}
}
</script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.show{
width: 400px;
height: 480px;
margin: 50px auto;
}
.show p img{
width: 400px;
height: 400px;
border: 1px solid orange;
}
.show ul{
list-style: none;
}
.show ul li{
float: left;
margin: 5px 10px 5px;
}
</style>
<body>
<div class="show" id="tushow">
<p ><img src="img/01.jpg" id="wo"/></p>
<ul id="ni">
<li><img src="img/1.jpg" data="img/01.jpg" /></li>
<li><img src="img/2.jpg" data="img/02.jpg" /></li>
<li><img src="img/3.jpg" data="img/03.jpg"/></li>
<li><img src="img/4.jpg" data="img/04.jpg"/></li>
</ul>
</div>
</body>
</html>
2、实现的效果：