掌握原生JS写轮播图的诀窍：循序渐进，轻松实现图片无缝轮播

2023-10-26 00:54:24

构建原生JS轮播图：从头开始的终极指南

如果你在寻找一种方法来增强你的网站的视觉吸引力，那么原生JS轮播图是一个完美的解决方案。它们不仅美观，而且功能强大，可以让你展示一系列图像或内容。

本指南将一步一步地带你完成构建一个自定义原生JS轮播图的过程，涵盖所有从基本结构到高级选项的方面。准备好在你的网站上添加一个引人注目的交互元素吧！

1. 创建轮播图的基本结构

首先，你需要设置轮播图的基本结构。这包括一个容器、一个图片列表和一些控制按钮。你可以使用HTML和CSS来构建这个结构，如下所示：

<div class="carousel">
  <ul class="carousel-slides">
    <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-button left" aria-label="Previous">&lt;</button>
  <button class="carousel-button right" aria-label="Next">&gt;</button>
</div>

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

.carousel-slides {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-slides li {
  flex: 1 0 auto;
  width: 100%;
  height: 100%;
}

.carousel-slides li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24px;
  padding: 10px 15px;
  border-radius: 5px;
}

.carousel-button.left {
  left: 0;
}

.carousel-button.right {
  right: 0;
}

2. 实现自动播放

接下来，让我们让轮播图自动播放。为此，我们可以使用setInterval()函数来设置一个计时器，每隔一段时间就切换图片。

const carousel = document.querySelector('.carousel');
const slides = carousel.querySelector('.carousel-slides');
const buttons = carousel.querySelectorAll('.carousel-button');

let currentSlide = 0;
let slideInterval = setInterval(nextSlide, 3000);

function nextSlide() {
  currentSlide++;
  slides.style.marginLeft = -currentSlide * 100 + '%';

  if (currentSlide === slides.children.length) {
    currentSlide = 0;
    slides.style.marginLeft = '0%';
  }
}

buttons.forEach(button => {
  button.addEventListener('click', e => {
    if (e.target.classList.contains('left')) {
      currentSlide--;
      slides.style.marginLeft = -currentSlide * 100 + '%';

      if (currentSlide < 0) {
        currentSlide = slides.children.length - 1;
        slides.style.marginLeft = -currentSlide * 100 + '%';
      }
    } else if (e.target.classList.contains('right')) {
      nextSlide();
    }
  });
});

3. 添加鼠标控制

为了让用户可以控制轮播图的播放，我们可以添加鼠标控制。我们可以监听鼠标悬停事件来暂停和恢复自动播放，并显示或隐藏控制按钮。

carousel.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
  buttons.forEach(button => {
    button.style.display = 'block';
  });
});

carousel.addEventListener('mouseleave', () => {
  slideInterval = setInterval(nextSlide, 3000);
  buttons.forEach(button => {
    button.style.display = 'none';
  });
});

4. 加入键盘控制

除了鼠标控制，我们还可以添加键盘控制。我们可以监听键盘事件来切换图片。

document.addEventListener('keydown', e => {
  if (e.key === 'ArrowLeft') {
    buttons[0].click();
  } else if (e.key === 'ArrowRight') {
    buttons[1].click();
  }
});

5. 实现无缝轮播

为了实现无缝轮播效果，我们可以克隆首尾两张图片。这样，当轮播图中的图片切换到最后一张时，它会无缝地切换到第一张图片。

const firstSlide = slides.firstElementChild;
const lastSlide = slides.lastElementChild;

slides.appendChild(firstSlide.cloneNode(true));
slides.insertBefore(lastSlide.cloneNode(true), slides.firstChild);

slides.style.marginLeft = '-100%';

6. 添加按钮控制

除了自动播放、鼠标控制和键盘控制，我们还可以添加按钮控制。我们可以放置一组按钮，每个按钮对应一张图片。

<div class="carousel-dots">
  <button class="carousel-dot" data-index="0"></button>
  <button class="carousel-dot" data-index="1"></button>
  <button class="carousel-dot" data-index="2"></button>
</div>

const dots = document.querySelector('.carousel-dots');

dots.addEventListener('click', e => {
  const index = e.target.dataset.index;
  currentSlide = parseInt(index);
  slides.style.marginLeft = -currentSlide * 100 + '%';
});