以便在单击它们时在displayed-img 元素中显示相应的图像。

将onclick处理程序附加到，以便在单击该处理程序时将变暗效果应用于完整尺寸的图像。再次单击它时，再次消除了暗化效果。

2、html、css和javascript协作实现

手动实现了html、css和javascript协作，对关键的部分写了代码注释

2.1、html

照片库

照片库示例

2.2 、cssh1 {

font-family: sans-serif;

text-align: center;

}

body {

width: 640px;

margin: 0 auto;

}

.full-img {

position: relative;

display: block;

width: 640px;

height: 480px;

}

.overlay {

position: absolute;

top: 0;

left: 0;

width: 640px;

height: 480px;

background-color: rgba(0,0,0,0);

}

button {

border: 0;

background: rgba(150,150,150,0.6);

text-shadow: 1px 1px 1px white;

border: 1px solid #999;

position: absolute;

cursor: pointer;

top: 2px;

left: 2px;

}

.thumb-bar img {

display: block;

width: 20%;

float: left;

cursor: pointer;

}

2.3 、javascript/*document.querySelector选择器里面的带“.”的内容都是html中的类属性内容，不带点的则为自带的鼠标点击外部触发属性*/

/*只要是document的选择器声明的变量，可以有很多方法：setAttribute，appendChild，onclick......*/

const displayedImage = document.querySelector('.displayed-img');/*displayed-img是对应html文件中的类属性*/

const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');

const overlay = document.querySelector('.overlay');

/* 添加图片循环 */

for (var i = 1; i <= 5; i++) {

const newImage = document.createElement('img'); /*对应上面部分大图的图片*/

newImage.setAttribute('src', 'images/pic' + i + '.jpg');

thumbBar.appendChild(newImage);/*对应下面部分的5张图片区域的效果，Node链表的效果——太精妙了，我刚开始还以为要很死板用画格子的方式实现*/

newImage.onclick = function(e) {   /*先初始化，没有鼠标点击的时候，displayedImage不会改变；一旦有鼠标点击，则会由*/

displayedImage.src = e.target.src;

}

}

/* 编写 变暗/变量 按钮功能 */

btn.onclick = function() {

const btnClass = btn.getAttribute('class');  /*const btn = document.querySelector('button')，选择器对应设置的属性*/

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)';

}

}

/*

ps:疑问？感觉根据visual编辑器点击跳转得到的方法注释跟实际不太一样；

appendChild(newChild: T): T;

* Returns a copy of node. If deep is true, the copy also includes the node's descendants.

readonly target: EventTarget | null;

* Returns the event's timestamp as the number of milliseconds measured relative to the time origin.

e.target.src的含义：

target定义：

target 属性规定哪个 DOM 元素触发了该事件。

target 事件属性可返回事件的目标节点(触发该事件的节点)，如生成事件的元素、文档或窗口。

e.target.src表示获取事件触发的src图片；参考：https://blog.csdn.net/qq_36412715/article/details/84345237

*/

3、javascript知识点涉及

e.target

target定义：

target 属性规定哪个 DOM 元素触发了该事件。

target 事件属性可返回事件的目标节点(触发该事件的节点)，如生成事件的元素、文档或窗口。

语法：

event.target

event.target.nodeName 　　//获取事件触发元素标签名(li，p，div，img，button…)

event.target.id　　　　　　//获取事件触发元素id

event.target.className　　//获取事件触发元素classname

event.target.innerHTML　 //获取事件触发元素的内容(li)