<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.big {
width: 415px;
height: 400px;
}
.small>img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="big">
<img src="./images/ju.jpg" alt="">
</div>
<div class="small">
<img src="./images/ju.jpg" alt="">
<img src="./images/ying.jpg" alt="">
<img src="./images/hu.jpg" alt="">
<img src="./images/bu.jpg" alt="">
</div>
<script type="text/javascript">
// 实现逻辑：鼠标浏览到小图，把小图的src属性赋值给大图
let imgs = document.getElementsByTagName('img');
// console.log(imgs) //可以多多查看伪数组里元素的属性，了解其都有什么事件
for(let i=1;i<imgs.length;i++){
imgs[i].onmouseover = function() {
imgs[0].src = this.src;
}
// 点击切换大图
// imgs[i].onclick = function() {
// imgs[0].src = this.src;
// }
}
</script>
</body>
</html>
