效果先看
知识要点
js事件关键字：onmouseover
代码资源
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟淘宝</title>
<style type="text/css">
#showdiv{
400px;
height: 480px;
}
/*设置table的样式*/
#ta{
margin: auto;
}
table tr td{
text-align: center;
border: 2px solid transparent;
}
table tr:nth-child(2) td:hover{
border: red 2px solid;
}
table tr:first-child td img{
400px;
height: 400px;
}
</style>
<script type="text/javascript">
//切换大图
function doChange(str){
var bigImg = document.getElementById("big");
bigImg.src="imgs/taobao/"+str;
}
</script>
</head>
<body>
<div id="showdiv">
<table border="1px" width="400px" height="480px" id="ta">
<tr height="300px">
<td colspan="5"><img src="imgs/taobao/01-big.png" id="big"></td>
</tr>
<tr height="60px">
<td onmouseover="doChange('01-big.png')"><img src="imgs/taobao/01-small.webp" ></td>
<td onmouseover="doChange('02-big.png')"><img src="imgs/taobao/02-small.webp" ></td>
<td onmouseover="doChange('03-big.png')"><img src="imgs/taobao/03-small.webp" ></td>
<td onmouseover="doChange('04-big.png')"><img src="imgs/taobao/04-small.webp" ></td>
<td onmouseover="doChange('05-big.png')"><img src="imgs/taobao/05-small.webp" ></td>
</tr>
</table>
</div>
</body>
</html>