如何用Vanilla JavaScript建立一个简单的旋转木马（14行代码！）

今天你吸猫了么
195 阅读5分钟

*{box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px; margin-left:0px;}。

简陋的旋转木马（或称 "滑块"）是网站上常见的功能，但它并不总是最简单的东西。

在本教程中，我们将使用vanilla JavaScript构建一个非常简单的旋转木马。事实上，它是如此简单，以至于只需要不到15行的JavaScript代码。

这种实现方式对于一个基本的网站来说是完美的，而且它的性能也很高，因为它允许你以一种可展示的方式显示内容，而不需要大量的代码。一旦你建立了这些幻灯片，你可以在其中添加任何你想要的内容；文本、图片、视频，你说了算。

下面是我们将要建立的旋转木马的成品--4个简单的彩色幻灯片。

让我们开始吧!

1.用HTML放置内容

让我们用HTML来定义我们的滑块的结构。我们将在一个容器中放置一些幻灯片和一些按钮来控制滑块，所以布局将看起来像这样。

<section class="slider-wrapper">

  <button class="slide-arrow" id="slide-arrow-prev">
    &#8249;
  </button>
  
  <button class="slide-arrow" id="slide-arrow-next">
    &#8250;
  </button>
  
  <ul class="slides-container" id="slides-container">
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li>
  </ul>
</section>

出于可访问性的考虑，我们分别用ul 和li 标签定义我们的幻灯片容器和幻灯片。

2.用CSS设计旋转木马的样式

现在我们要为我们的滑块设计样式。为了使这个演示尽可能的简单，我将只用背景颜色来设计幻灯片的样式，但正如前面提到的，任何元素都可以放在旋转木马中（图片、文字、视频等）。

我们要做的第一件事是为我们的slider-wrapper,slides-container 和slide 类提供样式。

幻灯片容器将有overflow:scroll 和display:flex 属性，以在单行上显示所有的幻灯片，而它的父容器，即滑块包装器，将有一个overflow-hidden 属性。这允许我们在容器中滚动浏览幻灯片，同时仍保持在页面的宽度内。

使用overflow:scroll 属性的一个好处是，它允许用户手动滚动幻灯片，所以它是 "可拖动的"。

我们还需要覆盖ul 标签的默认样式。然后，我们将把幻灯片设置为幻灯片容器的全部宽度和高度。

.slider-wrapper {
  margin: 1rem;
  position: relative;
  overflow: hidden;
}

.slides-container {
  height: calc(100vh - 2rem);
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: scroll;
  scroll-behavior: smooth;
}

.slide {
  width: 100%;
  height: 100%;
  flex: 1 0 100%;
}

我们将幻灯片容器的高度设置为calc(100vh-2rem) ，以抵消滑块包装的顶部和底部的1rem空白。

允许平滑滚动

另一个需要注意的重要属性是 [scroll-behaviour](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)在幻灯片容器类上。这是一个允许容器平滑地滚动到下一张幻灯片的属性，而不是它瞬间移动。

这就是我们的旋转木马在没有滚动条的情况下的样子。scroll-behaviour: smooth

Scrollbar, or No Scrollbar?

我们可以选择隐藏slidesContainer上的滚动条。在演示中，滚动条是存在的，但我们可以通过添加:

.slides-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

/* WebKit */
.slides-container::-webkit-scrollbar { 
    width: 0;
    height: 0;
}

旋转木马按钮的样式

最后，我们将设计我们的旋转木马按钮。我们将在按钮上设置一个opacity 属性，使它们在悬停或聚焦时略微透明，并且是实体的。

.slide-arrow {
  position: absolute;
  display: flex;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 4rem;
  background-color: white;
  border: none;
  width: 2rem;
  font-size: 3rem;
  padding: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 100ms;
}

.slide-arrow:hover,
.slide-arrow:focus {
  opacity: 1;
}

#slide-arrow-prev {
  left: 0;
  padding-left: 0.25rem;
  border-radius: 0 2rem 2rem 0;
}

#slide-arrow-next {
  right: 0;
  padding-left: 0.75rem;
  border-radius: 2rem 0 0 2rem;
}

3.用JavaScript添加滑块功能

是时候在功能中加入乐趣了!在这个滑块中，有两部分逻辑。

  1. 当点击前进箭头时显示下一张幻灯片
  2. 当点击向后的箭头时，显示上一张幻灯片

首先，获得我们所需要的滑块的所有元素。

const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");

现在已经完成了，我们将处理移动滑块的问题。我们可以通过使用以下属性来决定滑块容器的移动方式 scrollLeft属性。

"该**Element.scrollLeft** 属性获取或设置一个元素的内容从其左边缘滚动的像素数。"--MDN

由于我们想在点击前进箭头时显示下一张幻灯片，这意味着我们需要将slidesContainer向左滚动，宽度为一张幻灯片。

nextButton.addEventListener("click", (event) => {
  const slideWidth = slide.clientWidth;
    slidesContainer.scrollLeft += slideWidth;
});

分解一下这段代码中所发生的事情。

  • 我们为下一个按钮添加点击事件监听器
  • 当按钮被点击时，我们得到一张幻灯片的宽度值
  • 我们通过slideWidth ，增加slidesContainer 的属性scrollLeft 。

我们可以将同样的逻辑应用于向后的箭头按钮，但要做一个小小的调整。

prevButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft -= slideWidth;
});

用这个方法，我们不是增加scrollLeft 属性，而是从其中减去一张幻灯片的宽度。这样我们就可以在按下后退箭头时向后移动。

所有的代码

正如我们所承诺的那样，把整个JavaScript代码放在一起，就可以得到一个功能齐全的滑块，其JavaScript的行数不到15行。

const slidesContainer = document.getElementById("slides-container");
const slide = document.querySelector(".slide");
const prevButton = document.getElementById("slide-arrow-prev");
const nextButton = document.getElementById("slide-arrow-next");

nextButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft += slideWidth;
});

prevButton.addEventListener("click", () => {
  const slideWidth = slide.clientWidth;
  slidesContainer.scrollLeft -= slideWidth;
});

总结

关于旋转木马就到此为止。

当然，我们也可以对这个实现进行扩展，以包括一些功能，如分页或snap-to-slide，但为了本教程的目的，我们就到此为止。如果你正在寻找稍微复杂一点的实现，可以看看这篇文章。

avatar
文章
阅读
粉丝