CSS - 图像画廊

欢迎，有抱负的网页设计师们！今天，我们将深入探讨CSS图像画廊的精彩世界。作为你友好邻里的计算机老师，我很高兴能引导你完成这次旅程。让我们把那些单调的静态图像变成吸引眼球的交互式画廊，让你们的网站焕然一新！

简单图像画廊

让我们从基础开始。一个简单的图像画廊就像在墙上布置照片一样——一切都是关于展示。以下是如何使用CSS创建一个简单画廊的方法：

<div class="gallery">
<img src="image1.jpg" alt="图像 1">
<img src="image2.jpg" alt="图像 2">
<img src="image3.jpg" alt="图像 3">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}

在这个例子中，我们使用flexbox创建了一个响应式布局。flex-wrap: wrap属性确保如果空间不足，我们的图像会自动换行。justify-content: center属性则将图像水平居中。

带有悬停效果的图像画廊

现在，让我们添加一些交互性！悬停效果可以使您的画廊更具吸引力。就像添加了一个只有在仔细观察时才会出现的秘密信息。

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="图像 1">
<div class="overlay">
<div class="text">你好，世界</div>
</div>
</div>
<!-- 其他图像重复此结构 -->
</div>

.image-container {
position: relative;
width: 200px;
height: 200px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

这段CSS代码创建了一个在悬停时出现的覆盖层。transition属性为其提供了一个平滑的淡入效果。

使用媒体查询的响应式图像画廊

在今天这个多设备的世界里，响应式设计至关重要。让我们使我们的画廊能够适应不同的屏幕尺寸：

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

@media screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 400px) {
.gallery {
grid-template-columns: 1fr;
}
}

这段CSS代码使用CSS Grid来创建一个响应式布局。minmax函数确保我们的图像至少有200px宽，但如果有空间，它们可以更大。媒体查询会根据屏幕尺寸调整布局。

语法

让我们花点时间理解我们一直在使用的语法。CSS属性遵循以下结构：

选择器 {
属性: 值;
}

以下是一些在图像画廊中常用的CSS属性表格：

属性	描述	示例
display	指定显示行为	display: flex;
width	设置元素的宽度	width: 200px;
height	设置元素的高度	height: 200px;
margin	设置元素的边距	margin: 10px;
object-fit	指定图像如何缩放	object-fit: cover;
position	指定定位方法	position: relative;
opacity	设置元素的透明度	opacity: 0;
transition	指定过渡效果	transition: .5s ease;

水平滚动的CSS图像画廊

有时，您希望图像画廊能够水平滚动。就像一个可以左右滑动的照片卷：

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="图像 1">
<img src="image2.jpg" alt="图像 2">
<!-- 按需添加更多图像 -->
</div>
</div>

.gallery-container {
width: 100%;
overflow-x: auto;
}

.gallery-scroll {
display: flex;
width: max-content;
}

.gallery-scroll img {
width: 200px;
height: 200px;
margin-right: 10px;
object-fit: cover;
}

这段CSS代码创建了一个水平滚动的画廊。overflow-x: auto属性在需要时添加了水平滚动条。

垂直滚动的CSS图像画廊

垂直滚动的画廊非常适合在紧凑的空间中展示大量图像：

<div class="gallery-vertical">
<img src="image1.jpg" alt="图像 1">
<img src="image2.jpg" alt="图像 2">
<!-- 按需添加更多图像 -->
</div>

.gallery-vertical {
height: 400px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}

.gallery-vertical img {
width: 200px;
height: 200px;
margin-bottom: 10px;
object-fit: cover;
}

这段CSS代码创建了一个垂直滚动的画廊。overflow-y: scroll属性添加了垂直滚动条。

CSS Grid图像画廊

CSS Grid是一个强大的工具，用于创建复杂布局。让我们用它来创建一个动态图像画廊：

<div class="grid-gallery">
<img src="image1.jpg" alt="图像 1">
<img src="image2.jpg" alt="图像 2">
<img src="image3.jpg" alt="图像 3">
<img src="image4.jpg" alt="图像 4">
<img src="image5.jpg" alt="图像 5">
</div>

.grid-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.grid-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}

.grid-gallery img:nth-child(4) {
grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
grid-row: span 2;
}

这段CSS代码创建了一个网格布局，其中一些图像跨越多个列或行，形成更动态的布局。

带有标签的CSS图像画廊

标签式画廊是组织不同图像集合的好方法：

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">自然</button>
<button class="tablinks" onclick="openTab(event, 'City')">城市</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="自然 1">
<img src="nature2.jpg" alt="自然 2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="城市 1">
<img src="city2.jpg" alt="城市 2">
</div>

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

这个CSS创建了一个标签界面。您需要一些JavaScript来使其功能生效：

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

CSS幻灯片

让我们创建一个简单的幻灯片：

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

您需要一些JavaScript来控制幻灯片：

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // 每2秒更换一次图像
}

CSS幻灯片画廊

最后，让我们结合幻灯片和缩略图，以获得更交互式的体验：

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
</div>

.row {
display: flex;
}

.column {
flex: 33.33%;
padding: 5px;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

您需要修改JavaScript来处理缩略图的点击：

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

到这里，我们已经覆盖了多种CSS图像画廊技术。记住，熟能生巧。尝试结合这些技术，创建您自己独特的画廊。祝您编程愉快！

Credits: Image by storyset