效果如下
目录如下
代码如下：
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片库</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head>
<body>
<h1>照片库</h1>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<div class="overlay"></div>
<button class="dark">变暗</button>
</div>
<div class="thumb-bar"></div>
</body>
</html>
//main.js
const displayedImage = document.querySelector('.displayed-img');
//缩略图库
const thumbBar = document.querySelector('.thumb-bar');
const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');
/* 遍历图片并添加至缩略图区 */
for(let i = 1; i <= 5; i++) {
const newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.onclick = e => {
const imgSrc = e.target.getAttribute('src');
//大图
displayedImage.setAttribute('src', imgSrc);
};
}
/* 编写 变亮/变暗 按钮 */
btn.onclick = () => {
//这种方式机智哇
const btnClass = btn.getAttribute('class');
if(btnClass === 'dark') {
btn.setAttribute('class', 'light');
btn.textContent = '变亮';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
} else {
btn.setAttribute('class', 'dark');
btn.textContent = '变暗';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
}
};