效果如下：
鼠标经过下面的小图自动更换上面的大图
代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//鼠标经过小图显示大图
$(".tu").mouseover(function() {
alert($(this).html());
//获取当前元素的Html内容
var val = $(this).html();
//然后改变大图的元素内容
$(".big").html(val);
});
});
</script>
<style type="text/css">
#bigtu {
width: 400px;
height: 500px;
}
#bigtu .big, #bigtu .tu {
float: left
}
#bigtu .big, #bigtu .big img {
width: 400px;
height: 400px;
}
#bigtu .tu, #bigtu .tu img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="outer">
<div id="bigtu">
<div class="big">
<img src="static/img/1.png">
</div>
<div class="tu">
<img src="static/img/2.png">
</div>
<div class="tu">
<img src="static/img/3.png">
</div>
<div class="tu">
<img src="static/img/4.png">
</div>
<div class="tu">
<img src="static/img/5.png">
</div>
</div>
</div>
</body>
</html>
