代码和注释如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>外星人笔记本</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
}
body > img:nth-child(1) {
border-radius: 15px;
padding: 5px;
border: 5px solid orange;
}
ul {
list-style: none;
display: inline-block;
}
ul li {
float: left;
width: 50px;
height: 50px;
margin: 5px;
}
ul li.active {
border: 2px solid orange;
border-radius: 5px;
}
</style>
</head>
<body>
<img src="外星人笔记本/1.jpg" id="bigImg" />
<br />
<br />
<ul>
<li class="active">
<a href="">
<img src="外星人笔记本/1.jpg" width="50" class="smallImg" />
</a>
</li>
<li>
<a href="">
<img src="外星人笔记本/2.jpg" width="50" class="smallImg" />
</a>
</li>
<li>
<a href="">
<img src="外星人笔记本/3.jpg" width="50" class="smallImg" />
</a>
</li>
<li>
<a href="">
<img src="外星人笔记本/4.jpg" width="50" class="smallImg" />
</a>
</li>
<li>
<a href="">
<img src="外星人笔记本/5.jpg" width="50" class="smallImg" />
</a>
</li>
</ul>
</body>
<script>
// 大图
var img = document.getElementById("bigImg");
// 找到大图节点的另一种方式
// var img = document.querySelector("body >img");
// 鼠标移入小图li，其他小图的边框去掉，当前的高亮，也就是加上.active这个类
var liArray = document.querySelectorAll("ul li");
for (var i = 0; i < liArray.length; i++) {
liArray[i].onmouseenter = function () {
// 先让所有的小图标高亮都去掉
for (var i = 0; i < liArray.length; i++) {
// 所有的高亮先清除
liArray[i].className = "";
}
//让移入的高亮
this.className = "active";
// 鼠标移入当前的li,要做的是把小图的src给大图
var imgSrc = this.querySelector("img").getAttribute("src");
img.setAttribute("src", imgSrc);
// 获取小图的src给大图，也可以这么简写：
// img.setAttribute('src',this.querySelector("img").getAttribute("src"))
};
}
</script>
</html>
