vanilla_如何使用Vanilla JavaScript构建简单的全屏幻灯片

最新推荐文章于 2025-11-16 01:10:54 发布

翻译最新推荐文章于 2025-11-16 01:10:54 发布 · 389 阅读

文章标签：

#java #js #javascript #css #python #ViewUI

本文介绍如何仅使用纯JavaScript创建响应式全屏幻灯片。涵盖幻灯片的CSS样式、自动播放功能及鼠标悬停时的交互效果。

vanilla

在本教程中，您将学习如何使用纯JavaScript创建响应式全屏幻灯片。要构建它，我们将经历几个不同的前端技巧。另外，当我们将鼠标悬停在幻灯片上时，我们将更进一步，自定义光标的外观。

与往常一样，要初步了解我们将要构建的内容，请查看相关的CodePen演示（请查看较大的版本以获得更好的体验）：

注意：本教程不会讨论如何使幻灯片放映更加方便（例如按钮）。我们将主要关注CSS和JavaScript。

1.从页面标记开始

要创建幻灯片，我们需要一个带有slideshow类的元素。在其中，我们将放置一张幻灯片列表以及导航箭头。

每张幻灯片将包含背景图像。当然，如果您愿意，可以随时添加其他内容。

默认情况下，将显示第一张幻灯片。但是，我们可以通过将is-active类附加到所需的幻灯片来配置该行为。

这是必需的标记：

<div class="slideshow">
  <ul class="slides">
    <li class="slide is-active">
      <div class="cover" style="background-image: url(IMG_SRC);"></div>
    </li>
    <li class="slide">
      <div class="cover" style="background-image: url(IMG_SRC);"></div>           
    </li>
    <li class="slide">
      <div class="cover" style="background-image: url(IMG_SRC);"></div>           
    </li>
  </ul>
  <div class="arrows">
    <button class="arrow arrow-prev">
      <span></span>
    </button>
    <button class="arrow arrow-next">
      <span></span>
    </button>
  </div>
</div>
<main>...</main>

2.定义样式

准备好标记后，我们将继续幻灯片的主要样式。

堆叠幻灯片

默认情况下，所有幻灯片都将堆叠在另一个幻灯片上。除了活动幻灯片之外，它们都将被隐藏。

以下是相关的样式：

.slideshow .slides {
  display: grid;
}

.slideshow .slide {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transition: opacity 0.4s;
}

.slideshow .slide.is-active {
  opacity: 1;
}

幻灯片中的每个div都会获得cover类。这会将其背景图像转换为全屏背景图像：

.cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100vh;
}

.slideshow {
  cursor: none;
}

.slideshow .arrows {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slideshow .arrows .arrow {
  position: relative;
  width: 50%;
  cursor: inherit;
  visibility: hidden;
  overflow: inherit;
}

.slideshow .arrows .is-visible {
  visibility: visible;
}

.slideshow .arrows span {
  position: absolute;
  width: 72px;
  height: 72px;
  background-size: 72px 72px;
  mix-blend-mode: difference;
  filter: invert(1);
}

.slideshow .arrow-prev span {
  background-image: url(slider-prev-arrow.svg);
}
  
.slideshow .arrow-next span {
  background-image: url(slider-next-arrow.svg);
}

3.添加JavaScript

现在让我们向幻灯片添加互动性！

对于此示例，幻灯片将带有三个默认选项，我们可以通过指定关联的自定义属性来自定义这些选项：

选项	默认值	描述
`autoplay`	假	使幻灯片放映自动播放。
`autoplay-interval`	4000	切换幻灯片之间的间隔时间以毫秒为单位。
`stop-autoplay-on-hover`	假	悬停时停止自动播放模式。

变数

在深入研究这些选项之前，首先，我们将定义一堆变量，稍后将使用它们：

const slideshow = document.querySelector(".slideshow");
const list = document.querySelector(".slideshow .slides");
const btns = document.querySelectorAll(".slideshow .arrows .arrow");
const prevBtn = document.querySelector(".slideshow .arrow-prev");
const prevBtnChild = document.querySelector(".slideshow .arrow-prev span");
const nextBtn = document.querySelector(".slideshow .arrow-next");
const nextBtnChild = document.querySelector(".slideshow .arrow-next span");
const main = document.querySelector("main");
const autoplayInterval = parseInt(slideshow.dataset.autoplayInterval) || 4000;
const isActive = "is-active";
const isVisible = "is-visible";
let intervalID;

初始化事物

当所有页面资产准备就绪时，我们将调用init函数。

window.addEventListener("load", init);

此功能将触发四个子功能：

function init() {
  changeSlide();
  autoPlay();
  stopAutoPlayOnHover();
  customizeArrows();
}

稍后我们将看到，这些功能中的每一个都将完成特定的任务。

循环浏览幻灯片

changeSlide函数将负责遍历幻灯片。

每次单击按钮时，我们将执行以下操作：

获取当前活动幻灯片的副本。
从活动幻灯片中删除is-active类。
检查以查看单击了哪个按钮。如果这是下一个按钮，则将is-active类添加到幻灯片中，该类紧随活动幻灯片之后。如果没有这样的幻灯片，则第一张幻灯片将获得此类课程。
另一方面，如果单击上一个按钮，我们会将is-active类添加到活动幻灯片的上一个幻灯片中。如果没有这样的幻灯片，则最后一张幻灯片将获得此类。

这是此函数的签名：

// variables here

function changeSlide() {
  for (const btn of btns) {
    btn.addEventListener("click", e => {
      // 1
      const activeSlide = document.querySelector(".slide.is-active");
      // 2
      activeSlide.classList.remove(isActive);
      // 3
      if (e.currentTarget === nextBtn) {
        activeSlide.nextElementSibling
          ? activeSlide.nextElementSibling.classList.add(isActive)
          : list.firstElementChild.classList.add(isActive);
      } else {
        // 4
        activeSlide.previousElementSibling
          ? activeSlide.previousElementSibling.classList.add(isActive)
          : list.lastElementChild.classList.add(isActive);
      }
    });
  }
}

自动播放

autoplay功能将负责激活自动播放模式。

默认情况下，我们必须手动循环浏览幻灯片。

要激活自动播放，我们将data-autoplay="true"属性添加到幻灯片中。

我们还可以通过将data-autoplay-interval="number" （默认值为4000ms）定义为第二个属性来调整切换幻灯片之间的间隔时间，如下所示：

<div class="slideshow" data-autoplay="true" data-autoplay-interval="6000">
  ...
</div>

这是此函数的签名：

// variables here

function autoPlay() {
  if (slideshow.dataset.autoplay === "true") {
    intervalID = setInterval(() => {
      nextBtn.click();
    }, autoplayInterval);
  }
}

停止自动播放

当将stopAutoplayOnHover悬停在幻灯片上时， stopAutoplayOnHover函数将负责禁用自动播放模式。

要启用此功能，我们将data-stop-autoplay-on-hover="true"属性传递给幻灯片，如下所示：

<div class="slideshow" data-stop-autoplay-on-hover="true">
  ...
</div>

这是此函数的签名：

// variables here

function stopAutoPlayOnHover() {
  if (
    slideshow.dataset.autoplay === "true" &&
    slideshow.dataset.stopAutoplayOnHover === "true"
  ) {
    slideshow.addEventListener("mouseenter", () => {
      clearInterval(intervalID);
    });
    
    // touch devices
    slideshow.addEventListener("touchstart", () => {
      clearInterval(intervalID);
    });
  }
}

自定义箭头

customizeArrows函数将负责操纵导航按钮的可见性及其span的位置。

如前所述，导航按钮最初将被隐藏。

当我们将鼠标移到幻灯片中时，根据鼠标位置的不同，一次只会出现其中一个。其span元素的位置也将取决于鼠标指针的坐标。

离开幻灯片放映后，按钮将再次隐藏。

为了在各种屏幕/设备上满足这些要求，我们将使用两个鼠标事件以及两个触摸事件。

这是实现此功能的代码：

// variables here

function customizeArrows() {
  slideshow.addEventListener("mousemove", mousemoveHandler);
  slideshow.addEventListener("touchmove", mousemoveHandler);
  slideshow.addEventListener("mouseleave", mouseleaveHandler);
  main.addEventListener("touchstart", mouseleaveHandler);
}

function mousemoveHandler(e) {
  const width = this.offsetWidth;
  const xPos = e.pageX;
  const yPos = e.pageY;
  const xPos2 = e.pageX - nextBtn.offsetLeft - nextBtnChild.offsetWidth;

  if (xPos > width / 2) {
    prevBtn.classList.remove(isVisible);
    nextBtn.classList.add(isVisible);

    nextBtnChild.style.left = `${xPos2}px`;
    nextBtnChild.style.top = `${yPos}px`;
  } else {
    nextBtn.classList.remove(isVisible);
    prevBtn.classList.add(isVisible);

    prevBtnChild.style.left = `${xPos}px`;
    prevBtnChild.style.top = `${yPos}px`;
  }
}

function mouseleaveHandler() {
  prevBtn.classList.remove(isVisible);
  nextBtn.classList.remove(isVisible);
}