原生轮播图攻略：小白也能轻松搞定！

2023-09-10 00:58:15

创建令人惊叹的原生轮播图：分步指南

轮播图是网站和应用程序中常见的元素，它们可以生动地展示图片或其他内容。使用原生 JavaScript、HTML 和 CSS 可以构建原生轮播图，从而获得更高的灵活性。以下是创建原生轮播图的分步指南：

1. 构筑轮播图骨架

首先，创建容纳轮播图的 HTML 结构。通常，这包括一个容器元素（如 <div> 标签）和多个图像元素（<img> 标签）。

<div class="carousel">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

2. 设置样式

使用 CSS 为轮播图添加样式。设置容器的尺寸、图像的尺寸和位置，以及轮播图的过渡效果。

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

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

.carousel-item {
  position: absolute;
  left: 0;
  top: 0;
}

3. 使用 JavaScript 实现动态轮播

使用 JavaScript 启用轮播图的动态切换。设置一个计时器以循环显示不同的图像，并添加事件监听器以响应用户的交互（例如单击或滑动）。

const carousel = document.querySelector('.carousel');
const images = carousel.querySelectorAll('img');

let currentSlide = 0;

function showSlide(n) {
  images.forEach(image => image.classList.remove('active'));

  images[n].classList.add('active');
}

function nextSlide() {
  currentSlide++;

  if (currentSlide >= images.length) {
    currentSlide = 0;
  }

  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide--;

  if (currentSlide < 0) {
    currentSlide = images.length - 1;
  }

  showSlide(currentSlide);
}

setInterval(nextSlide, 3000);