简易灯箱画廊设计html,原生Js实现的画廊功能

原生Js实现画廊功能，点击图片，在下方出现相应放大图片。给a标签绑定onclick点击事件。这里上方的小图和下方将要展示大图，都是同一张图片，只是上下两个img的style中设置了不同的width和heigth。(如果不想设置width、height，另一种方法就是将a标签里src的图片存成大图，img展示的是小图。)通过Js点击事件结合css实现大图显示或隐藏，切换图片

具体如下图，代码附上

第一种

Document

*{

margin: 0;

padding: 0;

}

img{

width: 200px;

height: 100px;

}

#showimg{

width: 500px;

height: 240px;

/* background-color: pink;*/

}

.hide{

display: none;

}

.show{

display: block;

}