<html>
<head>
<title>模拟淘宝网</title>
<meta charset="UTF-8"/>
<!--声明js代码域-->
<script type="text/javascript">
//创建函数进行照片的联动和样式设置
function operInImg(img,src){
//设置图片的样式
img.style.border="solid 1px";
//设置大图的img路径
//获取大图对象
var big=document.getElementById("big");
//设置路径
big.src="img/"+src;
}
function operOutImg(img){
img.style.border="";
}
</script>
<!--声明css代码域-->
<style type="text/css">
/*设置div的样式*/
#showdiv{
width: 370px;
height: 400px;
border: solid 1px;
border-radius: 20px;
}
/*设置table的样式*/
#ta{
margin: auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="showdiv">
<table width="349px" id="ta">
<tr height="300px">
<td colspan="5"><img src="img/show1_big.jpg" id="big"/></td>
</tr>
<tr height="60px">
<td><img src="img/show1.jpg" onmouseover="operInImg(this,'show1_big.jpg')" onmouseout="operOutImg(this)"/></td>
<td><img src="img/show2.jpg" onmouseover="operInImg(this,'show2_big.jpg')" onmouseout="operOutImg(this)"/></td>
<td><img src="img/show3.jpg" onmouseover="operInImg(this,'show3_big.jpg')" onmouseout="operOutImg(this)"/></td>
<td><img src="img/show4.jpg" onmouseover="operInImg(this,'show4_big.jpg')" onmouseout="operOutImg(this)"/></td>
<td><img src="img/show5.jpg" onmouseover="operInImg(this,'show5_big.jpg')" onmouseout="operOutImg(this)"/></td>
</tr>
</table>
</div>
</body>
</html>
show1.jpg
show1_big.jpg
show2.jpg
show2_big.jpg
show3.jpg
show3_big.jpg
show4.jpg
show4_big.jpg
show5.jpg
show5_big.jpg