极客教程如何使用HTML、CSS和JavaScript在图库视图中点击预览图片
在这篇文章中，我们将看到如何使用HTML、CSS和一些JavaScript轻松地创建一个带有预览功能的图库。
方法： 我们将按照以下描述的方法进行操作。
HTML：
- 创建一个带有类名container的div。
- 在第一个div内创建另外两个div，一个用于主视图，另一个用于侧视图，分别使用类名main_view和side_view。
- 在主视图中插入一个带有id属性为main的图像标签。
- 在侧视图中插入图库中的所有其他图像，使用change函数并将图像的src传递给该函数。
CSS：
- 给容器设置宽度和边距。
- 给主视图设置高度和宽度。
- 设置主视图中图像的尺寸。
- 使用flex设置侧视图以正确大小显示所有图像。
JavaScript： 使用change函数，我们将替换主视图的src属性为被点击图像的源。
<!DOCTYPE html>
<html>
<body>
<!-- Container for our gallery -->
<div class="container">
<!-- Main view of our gallery -->
<div class="main_view">
<img src="one.jpg" id="main" alt="IMAGE">
</div>
<!-- All images with side view -->
<div class="side_view">
<img src="one.jpg" onclick="change(this.src)">
<img src="two.jpg" onclick="change(this.src)">
<img src="three.jpg" onclick="change(this.src)">
<img src="four.jpg" onclick="change(this.src)">
</div>
</div>
</body>
</html>
CSS代码
/*Setting Basic Dimensions to give
gallery view */
.container {
margin: 0 auto;
width: 90%;
}
.main_view {
width: 80%;
height: 25rem;
}
.main_view img {
width: 100%;
height: 100%;
object-fit: cover;
}
.side_view {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.side_view img {
width: 9rem;
height: 7rem;
object-fit: cover;
cursor: pointer;
margin: 0.5rem;
}
JavaScript代码
const change = src => {
document.getElementById('main').src = src
}
输出：
