使用 HTML、CSS 和 JavaScript 创建图像滑块

在本文中，我们将讨论如何使用 HTML、CSS 和 JavaScript 构建图像滑块。我将演示两种不同的创建滑块的方法，一种opacity是基于滑块的，另一种transform是基于滑块的。

创建 HTML

我们首先从 HTML 代码开始：

<div class="slider">
  <div class="slide">
    <img src="images/1.jpg" alt="demo image" />
  </div>
  <div class="slide">
    <img src="images/2.jpg" alt="demo image" />
  </div>
  . . .
  <a class="prev" onclick="prevSlide()">&lt;</a>
  <a class="next" onclick="nextSlide()">&gt;</a>
</div>

.slider充当整个图像滑块的容器。
.slide单独的幻灯片与图像一起封装在容器中。
.prev滑块导航由两个链接和控制.next。
我们还onclick为导航链接设置了事件监听器，当点击它们时，相应的 JavaScript 函数将被激活。

具体查看文件文档