图像是在用户访问您的网站时吸引用户注意力的多种方法之一。显示图像集合的一种有效方法是创建图像库。图像库是一种常见且有用的组件，用于以视觉上吸引人的方式显示多个图像。要构建图像库，您需要从基本结构和样式开始，然后通过交互性增强它。
什么是交互式图库？
交互式图像库是一种动态图像库，使用户能够以易于使用且组织良好的方式浏览所选图像。用户通常可以与图像交互来触发某些操作。这些图库可能包括缩略图导航等功能以及以更大格式（如模态或灯箱）查看图像的能力。
以下是大多数交互式图片库中常见的一些功能：
导航控件：提供了上一个和下一个按钮/图标，用户可以使用它们在图库中的图像之间移动。
缩略图导航：图像显示为缩略图，使查看者能够快速浏览整个集合。
灯箱：单击缩略图时，会打开一个模式窗口（也称为“灯箱”）。这会以更大的尺寸显示所选图像，并且大多数情况下使用户能够通过使用提供的导航控件来导航整个图库。
图像预览：页面允许用户将鼠标悬停在缩略图上以显示更大的图像预览，而不会导致用户离开当前页面。
标题和信息：有关每个图像的标题、描述或信息可以显示在灯箱中。
在本教程中，我们将介绍通过使用 HTML、CSS 和 JavaScript 构建灯箱来创建交互式图像库的基础知识。
什么是灯箱？
灯箱是一种用户界面元素或基于 JavaScript 的组件，通常用于在网站上的弹出窗口或模式窗口中显示图像、电影或其他媒体。灯箱的功能是将用户的注意力集中在正在显示的内容上，通常通过投射深色阴影或调暗背景来吸引对模态内容的注意。
这是一个代码笔演示，用于展示我们将在本教程中构建的交互式图像库/灯箱。在编辑器中以完整模式查看此内容以获得完整体验。
See the Pen Build an Interactive Image Gallery with HTML, CSS, and JavaScript by Envato Tuts+ (@tutsplus) on CodePen.
一、HTML 结构
我们将首先为我们的图片库设置 HTML 结构。这是 HTML 结构，由<head>带有元标记的部分、标题和外部样式表组成。
div
lightbox包含整个灯箱结构。跨度
close-btn是一个标有“x”符号的关闭按钮。closeLightbox单击时会触发该功能。img标签
lightbox-img代表灯箱中的主图像。其源代码将使用 JavaScript 动态更新。div
thumbnail-container是缩略图图像的容器，它将使用 JavaScript 动态填充。上一个和下一个按钮允许在灯箱中的图像之间导航。
二、基本 CSS 样式
让我们添加一些基本的 CSS 样式，使我们的图片库在视觉上更具吸引力。创建一个名为 的文件style.css并将其链接到您的 HTML 文件。
正文样式：这设置字体系列，删除默认边距和填充，并设置背景颜色。
画廊样式：这些定义了画廊的显示方式 - 作为包含包装项目的弹性容器。
图库图像样式：此样式属性设置图库图像的边距、光标样式和尺寸。
这些
lightbox样式使其以半透明的黑色背景覆盖整个视口。它被配置为一个弹性容器，允许垂直堆叠元素。这些
lightbox-img样式设置主灯箱图像的最大宽度和高度，以使其具有响应能力。关闭按钮样式：此样式将关闭按钮放置在灯箱的右上角。
导航按钮样式：这会将上一个和下一个按钮分别放置在灯箱图像的左侧和右侧。添加悬停效果以提供视觉反馈。
和样式定义缩略图的外观，包括显示、方向、大小、光标样式、边距和过渡效果
thumbnail-container。thumbnail悬停效果和active-thumbnail类提供视觉反馈。
三、用于交互的 JavaScript
创建一个名为 的文件script.js并将其链接到您的 HTML 文件。现在让我们将 JavaScript 代码分解为更小的部分并解释每个部分。
变量初始化：
currentIndex：跟踪当前显示图像的索引。images：选择图库中的所有图像。totalImages：存储图库中的图像总数。openLightbox功能：当点击图库中的图像时会触发此功能。
它确定单击图像的索引并更新
currentIndex。然后它调用
updateLightboxImage在灯箱中显示所选图像。然后，它将灯箱设置为可见 (
display: flex)。closeLightbox功能：此函数通过将其显示属性设置为“none”来关闭灯箱。
changeImage功能：此函数根据给定方向更改灯箱中显示的图像（1 表示下一个，-1 表示上一个）。
它处理边界条件，以便在到达最后一个图像后循环回到第一个图像，反之亦然。
然后该函数调用
updateLightboxImage以更新灯箱内容。updateLightboxImage功能：这会更新主灯箱图像并动态生成和显示缩略图。
突出显示当前选定的缩略图。
当打开灯箱、更改图像或单击缩略图时会调用它。
updateMainImage功能：单击缩略图时，这会更新主灯箱图像。
它还由附加到每个缩略图的单击事件***器调用。
初始缩略图：
调用
updateLightboxImage添加初始缩略图集。键盘导航事件监听器：
监听键盘上左、右箭头键的按下情况。
changeImage当灯箱打开时调用在图像之间导航。
四、测试站点
保存文件并在 Web 浏览器中打开 HTML 文件，您应该会看到正在运行的交互式图像库。当您单击任何图像时，它会打开一个模式，其中单击的图像会以粗体显示，并且还会添加导航按钮以方便在图像之间移动。它还在灯箱图像下添加缩略图。
当前显示的特定图像的缩略图将具有不透明/深色阴影的样式。当前未显示的其他缩略图图像不会具有暗不透明度。模式的右上角还有一个关闭图标 (X)，单击该图标即可关闭模式。
结论
现在你就拥有了！您已经使用 HTML、CSS 和 JavaScript 成功构建了交互式图像库。该图库使用户能够在灯箱中查看图像，从而创造更具吸引力和视觉吸引力的用户体验。
您可以自定义此图库或通过添加自定义动画和搜索功能等功能来进一步改进它。此外，为了确保响应灵敏且用户友好的设计，请针对不同的屏幕宽度和设备优化您的图库。通过构建更多的交互式图像库来进行更多练习，以熟悉这个概念。
- 一、HTML 结构
- 二、基本 CSS 样式
- 三、用于交互的 JavaScript
- 变量初始化：
- openLightbox功能：
- closeLightbox功能：
- changeImage功能：
- updateLightboxImage功能：
- updateMainImage功能：
- 初始缩略图：
- 键盘导航事件监听器：
- 四、测试站点
18073365989
发表评论