MDN相片走廊的一些总结

一、布局

A：看了一下例子，我应该给他分块

共3个板块：

1、当前图片块

2、要覆盖的块

3、预览图板块

所以我们的html代码应该这样写

<div>

</div>

B：这里因为第二个块在第一块里面，第一个是一个大的div块，包含三部分：1、当前显示的图片，2、第二个块，3、按钮

所以第一个大块应该这样写

<div>

<img>打开页面的图片</img>

</div>

C：第三个就是预览块，执行循环函数

for（）在css里做好对齐以及尺寸设置，剩下的就是写函数问题了

for（i = 1; i<= 5; i++）

二、函数

1、底下的预览图片可以点击，然后触发事件，第二个块将其覆盖

在这之前，先定义下新图片var newImage = document.createElement('img');

2、然后，创建新图片 newImage.setAttribute('src',images/pic + i +'.jpg');

3、建立子元素 thubBar.appendChild(newImage);|这点我理解的还不是很透彻，前面已经创建元素img了，为什么这里又要创建子元素？？？？

4、再然后开始点击了，因为点击时是当前的图片，不能用newImage元素，这个元素已经执行到最后一个了，要定义一个新的.图片地址，

于是，我们就定义一个var imgSrc = e.target.getAttribute('src'); 然后把这个函数命名为displayImage(imgSrc);

5、于是执行编写点击事件时，获取当前点击图片的src的数据newImage.onclick = function(e){

var imgSrc = e.target.getAttribute('src')

}

6、然后再执行生成新的图片的函数

function displayImage(imgSrc){

displayedImage.setAttribute('src',imgSrc);

}

7、for循环语句至此结束，实现了点击图片--获取当前点击图片的地址---在块上生成新的地址的图片

8、这部分就是点亮半透明的块就行了。

地址如下

https://mdn.github.io/learning-area/javascript/building-blocks/gallery/