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

使用 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 函数将被激活。

添加样式

为了更轻松地设置元素样式，建议删除所有元素的默认内边距和边距，并将其box-sizing属性设置为border-box。这允许根据元素的尺寸border-box而不是content-box来调整元素的大小。

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

然后添加.slider样式。

.slider {
  width: 500px;
  height: 300px;
  margin: auto;
  overflow: hidden;
  transform: translateY(50%);
}

以及.slide。

.slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

img {
  width: 100%;
  height: auto;
}

最后，我们还将导航按钮放置在.slider容器的左侧和右侧。

.prev,
.next {
  cursor: pointer;
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

添加 JavaScript 代码

现在，让我们仔细看看.slide样式。

.slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

通过使用position: absolute，我们将所有.slide元素放置在一个位置，彼此堆叠。我们可以使用浏览器中的开发人员工具进行验证。

基于opacity的滑块

现在我们需要做的就是将当前幻灯片的opacity设为100，同时将所有其他幻灯片的opacity设为0。

为了实现幻灯片效果，我们可以编写 JavaScript 代码，以便每当单击导航链接时，"当前幻灯片"都会相应调整。

我们首先将所有幻灯片的opacity设置0。

.slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  opacity: 0;
  transition: opacity 1s ease;
}

然后添加以下 JavaScript 代码。

const slides = document.querySelectorAll(".slide");
let currentSlide = 0;

function showSlide(index) {
  slides.forEach((slide, i) => {
    if (i === index) {
      slide.style.opacity = 100;
    } else {
      slide.style.opacity = 0;
    }
  });
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide(currentSlide);
}

showSlide(currentSlide);

第 1 行选择所有.slide，并将它们分配给变量slides。

第 2 行将变量初始化currentSlide为0，它指向图像滑块中的第一张幻灯片。

现在，我们来看看nextSlide()函数。

function nextSlide() {
  currentSlide = (currentSlide + 1) % slides.length;
  showSlide(currentSlide);
}

在本例中，slides.length给出了滑块中幻灯片的总数，当执行此函数（通过单击链接.next）时，currentSlide将进行相应调整。

例如，当函数第一次执行时，假设总共有 5 张幻灯片：

currentSlide = (0 + 1) % 5 = 1

但当执行第五次时，currentSlide将重置回0。

currentSlide = (4 + 1) % 5 = 0

prevSlide()函数的工作原理类似。

function prevSlide() {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  showSlide(currentSlide);
}

当currentSlide是4时，它指向第五张幻灯片：

currentSlide = (4 - 1 + 5) % 5 = 3

当currentSlide是0时，它指向第一张幻灯片：

currentSlide = (0 - 1 + 5) % 5 = 4

然后变量currentSlide将作为showSlide()的参数index

function showSlide(index) {
  slides.forEach((slide, i) => {
    if (i === index) {
      slide.style.opacity = 100;
    } else {
      slide.style.opacity = 0;
    }
  });
}

此函数迭代存储在slides中的所有幻灯片，如果迭代索引 ( i) 与currentSlide索引 ( index) 匹配，则该幻灯片将被设置opacity为100。如果没有，那opacity就是0。

基于transform

我们将其称为图像滑块，但从最终结果中可以看到，没有太多滑动，因为过渡是基于不透明度的。我们如何调整代码，以便当单击导航链接时，图像实际上滑到下一个？

我们必须进行两项更改。首先，.slide 必须水平排列在.slider容器后面，而不是相互堆叠。我们可以将.slider容器视为一个窗口。每次单击链接时，.slide 都会向左或向右移动以显示上一张或下一张图像。

.slider {
  width: 500px;
  height: 300px;
  margin: auto;
  overflow: hidden;
  transform: translateY(50%);

  display: flex;
  align-items: center;
}

.slide {
  flex: 0 0 100%;
  transition: transform 1s ease;
}

我们使用弹性布局来实现这种效果。flex: 0 0 100%将每个slide的宽度设置为100%。

接下来，调整showSlide()功能。

function showSlide(index) {
  slides.forEach((slide, i) => {
    const slideWidth = slide.clientWidth;
    slide.style.transform = `translateX(-${index * slideWidth}px)`;
  });
}

再次假设总共有五张幻灯片，并且每张幻灯片都是500px宽。当索引为3时，index * slideWidth将是1500，并将translateX(-1500px)所有.slide 向左移动1500像素，显示第四个图像。