带有 HTML、CSS 和 JavaScript 的全屏滑块

2025-06-07

带有 HTML、CSS 和 JavaScript 的全屏滑块

最初发布在我的博客上

在这篇文章中，我们将使用 HTML、CSS 和 JavaScript 构建全屏滑块。

您可以在这里实时查看

HTML

正如您所见，我们首先将所有内容包装在主标签中。

    <main>
      <div class="slider">
        <div class="slider--content">
          <button class="slider__btn-left">
            <i class="fas fa-angle-left"></i>
          </button>
          <div class="slider--feature">
            <h1 class="slider--title">Tasty</h1>
            <p class="slider--text"></p>
            <button class="slider--btn">Get started</button>
          </div>
          <button class="slider__btn-right">
            <i class="fas fa-angle-right"></i>
          </button>
        </div>
      </div>
    </main>
Enter fullscreen mode Exit fullscreen mode

然后，将滑块元素保存在.slider类中。我们还需要两个按钮来切换下一张或上一张幻灯片。按钮.slider--feature将保存幻灯片元素的标题和描述。顺便说一下，我使用 Font Awesome 制作图标，因此您需要在此处

创建一个帐户，然后将链接添加到 head 标签。

CSS

像往常一样，我们通过一些重置来启动 CSS。

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  background: #444;
}
Enter fullscreen mode Exit fullscreen mode

然后，更改背景、字体系列并从谷歌字体导入字体Open Sans 。

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

.slider--content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

.slider--feature {
  text-align: center;
}

.slider--title {
  font-size: 2.5rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
}

.slider--text {
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  margin: 0.5rem 0;
}
Enter fullscreen mode Exit fullscreen mode

之后，我们使用该类.slider创建幻灯片元素，使其使用视口的完整宽度和高度，并借助 JavaScript 准备好接收图像作为背景。

然后，设置display:flex和justify-content:space-between到该类.slider--content，以便根据可用空间均匀分布元素。

.slider__btn-right,
.slider__btn-left {
  background: transparent;
  border: none;
  outline: none;
  font-size: 4rem;
  color: #eee;
  padding: 0 1rem;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

.slider--btn {
  background: #fff;
  text-transform: uppercase;
  border: none;
  color: #444;
  border: 1px solid #444;
  outline: none;
  font-weight: 700;
  padding: 0.8rem 2rem;
  cursor: pointer;
}

.slider__btn-left:hover,
.slider__btn-right:hover {
  transform: scale(0.95);
}
Enter fullscreen mode Exit fullscreen mode

如您所见，此代码块用于设置按钮的样式。.slider__btn-right和.slider__btn-left类帮助我们设置幻灯片的左右按钮样式。我们还使用transition: transform 0.1s ease-in-out来在悬停时添加一些缩放效果transform: scale(0.95)。 并将.slider--btn类应用于号召性用语按钮，以获得美观​​的样式。

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation: fadeIn 1s;
}
Enter fullscreen mode Exit fullscreen mode

在这里，我们@keyframes给幻灯片元素应用淡入淡出动画。.fadeIn当发生变化时，该类将动态添加到幻灯片中。

JavaScript

像往常一样，我们通过选择所需的元素来开始 JavaScript 部分。

const slideContainer = document.querySelector('.slider');
const sliderText = document.querySelector('.slider--text');
const btnLeft = document.querySelector('.slider__btn-left');
const btnRight = document.querySelector('.slider__btn-right');

const sliderImages = [
  {
    src: 'https://drive.google.com/uc?id=1BzhhKeOc9XyZMPXnZAi_JiOYdZrwLYu-',
    text: 'Taste the magic'
  },
  {
    src: 'https://drive.google.com/uc?id=1M1TR1HjJCj-TuOa54jzty8QK9QUdNfSC',
    text: 'Taste the incredible'
  },
  {
    src: 'https://drive.google.com/uc?id=1twyebwsDDBtPiyFHxTIf9P26sDGiq5Qi',
    text: 'Taste the dream'
  }
];

let slideCounter = 0;
Enter fullscreen mode Exit fullscreen mode

然后，我们创建一个图像数组，用作幻灯片的背景图像。同时，声明一个变量，slideCounter用于计算幻灯片的数量。

const startSlider = () => {
  slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ), url(${sliderImages[0].src})`;
  sliderText.innerHTML = sliderImages[0].text;
};
Enter fullscreen mode Exit fullscreen mode

该startSlider()函数将数组中的第一张图片设置sliderImages为幻灯片的背景。我还设置了背景样式，使linear-gradient()图片稍微变暗，最后将合适的文本添加到幻灯片元素中。

btnRight.addEventListener('click', function() {
  if (slideCounter === sliderImages.length - 1) {
    slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ), url(${sliderImages[0].src})`;
    sliderText.innerHTML = sliderImages[0].text;
    slideCounter = -1;

    slideContainer.classList.add('fadeIn');
    setTimeout(() => {
      slideContainer.classList.remove('fadeIn');
    }, 1000);
  }
  slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
      ),url(${sliderImages[slideCounter + 1].src})`;
  sliderText.innerHTML = sliderImages[slideCounter + 1].text;
  slideCounter++;
  slideContainer.classList.add('fadeIn');
  setTimeout(() => {
    slideContainer.classList.remove('fadeIn');
  }, 1000);
});
Enter fullscreen mode Exit fullscreen mode

这里，我们监听幻灯片上右侧按钮的点击事件。然后，检查计数器 (slideCounter) 是否等于最后一张幻灯片。如果是，则使用数组中的第一个图像和文本重新播放幻灯片。然后，添加类以fadeIn在幻灯片进入时为其添加动画效果。

之后，如果计数器 (slideCounter) 不等于最后一张幻灯片，我们可以使用相应的数据设置下一张幻灯片，并增加slideCounter变量的值，最后在 1 秒后移除动画，以便能够再次为其添加动画效果。

btnLeft.addEventListener("click", function() {
  if (slideCounter === 0) {
    slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ),url(${sliderImages[sliderImages.length - 1].src})`;
    sliderText.innerHTML = sliderImages[sliderImages.length - 1].text;
    slideCounter = sliderImages.length;
    slideContainer.classList.add("fadeIn");
    setTimeout(() => {
      slideContainer.classList.remove("fadeIn");
    }, 1000);
  }

  slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ),url(${sliderImages[slideCounter - 1].src})`;
  sliderText.innerHTML = sliderImages[slideCounter - 1].text;
  slideCounter--;
  slideContainer.classList.add("fadeIn");
  setTimeout(() => {
    slideContainer.classList.remove("fadeIn");
  }, 1000);
});

startSlider();
Enter fullscreen mode Exit fullscreen mode

正如您在此处所见，我们使用相同的流程通过左键切换幻灯片，只是我们会检查计数器是否等于零。如果是，则转到最后一张幻灯片。如果不是，则转到上一张幻灯片并减少计数器变量的值。

最后，使用该函数启动滑块startSlider()。

您可以在这里实时查看

全屏滑块

叽叽喳喳 博客 通讯 GitHub 领英 CODEPEN 开发
文章来源：https://dev.to/ibrahima92/fullscreen-slider-with-html-css-and-javascript-4odn
Devto 翻译
PREV
如何使用 JavaScript 将文本复制到剪贴板（5 行代码）？
NEXT
使用 JavaScript 标记构建搜索过滤器 使用 JavaScript 显示数据 使列表可过滤