<!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>