巧用 JavaScript 轻松实现翻页笔功能

2023-09-07 13:40:42

作为技术人员，生活中难免会遇到一些实际问题，而能通过技术手段解决这些问题，总能带来莫大的成就感。就拿我最近的一个需求来说，为了在一次团队分享中更方便地控制幻灯片，我决定自己开发一个翻页笔。

传统的翻页笔通常价格不菲，而我当时的经济状况又不允许购买。于是，我决定用自己的技术专长来解决这个问题。我选择使用 JavaScript、HTML 和 CSS 来实现翻页笔的功能，因为这些技术既简单易用，又可以很好地控制幻灯片。

实现步骤

HTML 结构

首先，我们需要创建一个简单的 HTML 结构来表示我们的幻灯片：

<div class="slides">
  <div class="slide active">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>

CSS 样式

接下来，我们需要使用 CSS 来为幻灯片设置样式。我们将隐藏所有幻灯片，只显示当前幻灯片：

.slides {
  display: flex;
  flex-direction: row;
}

.slide {
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}

.slide.active {
  display: block;
}

JavaScript 逻辑

最后，我们使用 JavaScript 来实现翻页逻辑。我们需要监听键盘事件，当用户按下向左或向右箭头键时，翻转到上一张或下一张幻灯片：

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

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft") {
    activeIndex--;
    if (activeIndex < 0) activeIndex = slides.length - 1;
    updateSlide();
  } else if (e.key === "ArrowRight") {
    activeIndex++;
    if (activeIndex >= slides.length) activeIndex = 0;
    updateSlide();
  }
});

const updateSlide = () => {
  slides.forEach((slide) => slide.classList.remove("active"));
  slides[activeIndex].classList.add("active");
};