如何在10分钟内用JS原生手写一个轮播图

2023-12-30 22:15:19

轮播图（也称为图片轮播、滚动图片或幻灯片）是一种常见的网页设计元素，用于展示一系列的图片。它们可以用于产品展示、广告宣传或其他需要动态更新内容的场合。本文将介绍如何使用纯JavaScript在10分钟内制作一个简单的轮播图。

什么是轮播图

轮播图是一种在网页上循环播放一组图片的组件。用户可以通过点击按钮手动切换图片，或者轮播图可以自动播放下一张图片。轮播图的设计可以非常简单，也可以非常复杂，包括过渡动画、自动播放、指示器等功能。

创建轮播图所需的元素

要制作轮播图，首先需要创建以下HTML结构：

<div class="carousel">
  <ul class="carousel-list">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
    <!-- 更多图片 -->
  </ul>
  <button class="carousel-control prev">Prev</button>
  <button class="carousel-control next">Next</button>
</div>

设置轮播图的样式

接下来，我们需要使用CSS来设置轮播图的样式。以下是一些基本的CSS样式：

.carousel {
  position: relative;
  width: 80%;
  margin: auto;
}

.carousel-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carousel-list li.active {
  opacity: 1;
}

添加动画效果

现在，我们需要使用JavaScript来添加轮播图的动画效果。以下是如何使用setInterval()函数来创建轮播图的动画效果：

const carouselList = document.querySelector('.carousel-list');
const images = carouselList.querySelectorAll('li img');
let currentIndex = 0;
let intervalId;

function showImage(index) {
  images.forEach((img, i) => {
    img.classList.remove('active');
  });
  images[index].classList.add('active');
}

function nextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}

function prevImage() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  showImage(currentIndex);
}

carouselList.addEventListener('DOMContentLoaded', () => {
  intervalId = setInterval(nextImage, 3000);

  carouselList.querySelector('.carousel-control.next').addEventListener('click', nextImage);
  carouselList.querySelector('.carousel-control.prev').addEventListener('click', prevImage);
});

添加控制轮播图的按钮

为了让用户可以手动控制轮播图，我们需要添加一些按钮来播放和暂停轮播图：

<button id="play-pause-button">Play</button>

const playPauseButton = document.querySelector('#play-pause-button');

playPauseButton.addEventListener('click', () => {
  if (playPauseButton.textContent === 'Play') {
    playPauseButton.textContent = 'Pause';
    clearInterval(intervalId);
  } else {
    playPauseButton.textContent = 'Play';
    intervalId = setInterval(nextImage, 3000);
  }
});

添加控制轮播图的前一张和后一张图片的按钮

最后，我们可以添加一些按钮来允许用户向前和向后移动图片：

<button id="previous-button">Previous</button>
<button id="next-button">Next</button>

const previousButton = document.querySelector('#previous-button');
const nextButton = document.querySelector('#next-button');

previousButton.addEventListener('click', () => {
  prevImage();
});

nextButton.addEventListener('click', () => {
  nextImage();
});