HTML 滑块

滑块是一组可以来回移动的连续帧。本文演示了如何仅使用 HTML 和 CSS 创建幻灯片。

首先输入基础 HTML 代码，然后使用类型作为单选命令创建帧的单选按钮。之后实现帧设计。帧可以通过单选按钮和带有 margin-left 的控制标签进行移动和更改。可以使用图像代替文字。浏览器因此使用的内存和计算资源更少。

滑块是可单独访问的帧的集合。滑块帧可以包含图片、电影，甚至 HTML 元素（如背书或评论）。当今许多网站都有滑块。当开发人员需要传达有关网站的信息但又不想占用过多空间时，他们会使用滑块。

例如，如果开发人员正在为一个产品创建一个网站，他们可能希望向消费者提供他们的背书或评论，以便他们信任他们并购买他们的产品。开发人员可以设计一个滑块，以便消费者可以阅读并滚动浏览每个评论。

前提条件

通过使用 HTML、CSS 和 JavaScript，我们将了解如何制作一个简单的 CSS 图片滑块。我们需要熟悉一些概念才能完全理解正在发生什么以及我们在做什么。现在让我们来看看它们。

• HTML： 我们应该熟悉 HTML 的基础知识，包括其组件和标签。由于我们将使用其中一些来构建滑块，因此我们应该了解每个标签和元素在我们滑块中的功能。
• CSS： 我们将使用大量 CSS 来构建滑块。我们应该熟悉一些 CSS 中级原则，如堆叠、z-index、position 和动画。在构建滑块时，这些都将是必需的。
• JavaScript： 我们应该熟悉 JavaScript 的基础知识，包括变量定义、for 循环使用和 DOM 操作。这些将用于调整滑块并提供所需的效果。

如何创建滑块

使用 HTML 和 CSS 页面创建滑块。

步骤 1：使用 HTML 代码创建图片滑块的基础布局。

让我们从构建滑块的框架开始。如前所述，滑块是帧的集合。我们将构建一个 CSS 图片滑块。

首先将创建父 div，它将容纳滑块图片和功能。我们还将添加一些样式，例如修改背景颜色以及父 div 的高度和宽度。

步骤 2：添加上一页和下一页按钮。

滑块上可以看到上一页和下一页按钮。这些用于在滑块的帧之间移动。我们将为父 div 提供一些简单的按钮。用户可以使用这些按钮在轮播图的图片之间移动。为了简单起见，我们将使用按钮文本和 > 分别表示上一页和下一页。

除了添加这些按钮，我们还将对基本 HTML 按钮进行样式设置，以便它们与中心 div 垂直居中对齐。这样做是为了更轻松地导航滑块。为了垂直对齐按钮，我们将使用相对定位。

输出

步骤 3：在滑块中包含必要的文本和图片

添加按钮后，就可以上传图片了。为了制作 CSS 图片滑块，我们将使用花卉图片。将使用 position 和 z-index 将图片堆叠在一起。我们将使用一个主类并将它的 display 设置为 visible，因为我们需要一张图片显示出来。为了防止查看者看到其余的图片，它们的 display 将会被隐藏。

滑块中的文字也将指示用户当前正在浏览哪张图片。用户将受益于对轮播图中图片数量和排列方式的更好理解。

输出

步骤 4：使用 JavaScript 代码激活两个按钮

所有图片都已添加到我们为滑块构建的类中。要向前移动，我们必须按上一个和下一个按钮。我们将采用 javascript。

• 首先，必须为这些按钮添加一个事件监听器。当用户选择上一个或下一个按钮时，应执行相应的操作。
• 为了指示查看者应该看到哪张图片，我们使用了主类。我们必须确定哪张图片将被分配给这个类。只有具有主类的图片才会显示给查看者，而所有其他图片都将被隐藏。
• 为此，我们将使用 DOM 操作。我们可以将主类添加到新图片，并使用 DOM 操作删除现有图片的该主类。
• 现在，我们将利用上一个和下一个按钮事件监听器来决定哪张图片应该具有主类。我们必须首先收集当前在幻灯片中的所有图片。我们可以看到父滑块-轮播图有一个图片 div。使用 DOM 的 querySelector，我们可以获取它。一旦我们有了所有的图片 div，我们现在必须选择合适的图片并为其分配主类。其余的将没有主类，因此将对用户隐藏。

可以初始化一个最初指向 0 的变量。这个变量将让我们知道用户当前可以看到哪张图片。我们将根据用户是单击下一个还是上一个来更改变量的值。如果变量为 0 且用户单击上一个，则其值将更改为（图片 div 的数量 - 1）。如果用户在最后一张图片时单击下一个图片，则变量的值将更改为 0。

输出