向左向右都行的纯JS轮播，新人必备！

前端

2023-12-25 11:58:21

向左向右都行的纯JS轮播，新人必备！

简介

轮播是一种在网站或应用程序中展示多个项目或图像的常见交互元素。它允许用户通过点击或滑动来浏览这些项目或图像。轮播可以用于展示产品、新闻、图片或任何其他类型的媒体内容。

构建轮播

本教程将带您逐步了解如何使用纯JavaScript构建一个功能齐全的轮播。该轮播将具有以下特点：

自动播放：轮播将自动播放，并在一定时间间隔后切换到下一张图片。
手动控制：用户可以通过点击左右箭头来手动控制轮播。
无缝过渡：轮播图片之间的切换将平滑过渡，不会出现任何闪烁或卡顿。

步骤 1：创建 HTML 结构

首先，我们需要创建一个简单的 HTML 结构来容纳轮播。您可以使用以下代码：

<div class="carousel">
  <div class="carousel__inner">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
  </div>
  <button class="carousel__button--prev">‹</button>
  <button class="carousel__button--next">›</button>
</div>

步骤 2：添加 CSS 样式

接下来，我们需要添加一些CSS样式来美化轮播。您可以使用以下代码：

.carousel {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.carousel__inner {
  width: 400%;
  height: 100%;
  display: flex;
}

.carousel__inner img {
  width: 25%;
  height: 100%;
  object-fit: cover;
}

.carousel__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #fff;
  background-color: #000;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.carousel__button--prev {
  left: 10px;
}

.carousel__button--next {
  right: 10px;
}

步骤 3：添加 JavaScript 代码

最后，我们需要添加一些JavaScript代码来实现轮播的功能。您可以使用以下代码：

const carousel = document.querySelector('.carousel');
const carouselInner = carousel.querySelector('.carousel__inner');
const carouselButtons = carousel.querySelectorAll('.carousel__button');

let currentSlide = 0;

const nextSlide = () => {
  currentSlide++;
  if (currentSlide > 3) {
    currentSlide = 0;
  }
  carouselInner.style.marginLeft = `-${currentSlide * 100}%`;
};

const prevSlide = () => {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = 3;
  }
  carouselInner.style.marginLeft = `-${currentSlide * 100}%`;
};

carouselButtons[0].addEventListener('click', prevSlide);
carouselButtons[1].addEventListener('click', nextSlide);

setInterval(nextSlide, 3000);