让轮播图成为网站的吸睛利器：一看就懂的JS实现方案

2023-06-01 19:55:35

用 JavaScript 构建一个引人注目的轮播图：实现步骤和技巧

网站建设中轮播图的重要性

轮播图是当今网站建设中不可或缺的元素，它们能够显著提升网站的视觉吸引力，增强用户参与度。作为一名网页设计师或前端开发人员，掌握轮播图的实现技术至关重要。本博客将深入探讨如何使用 JavaScript 构建一个功能丰富的轮播图，涵盖自动轮播、悬停暂停、图片切换等关键功能。

HTML 结构

轮播图的 HTML 结构由一个无序列表（<ul>）组成，用于容纳轮播图片，以及另一个无序列表（<ol>），用于指示当前显示的图片。

<div class="carousel">
  <ul class="carousel-inner">
    <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>
  <ol class="carousel-indicators">
    <li data-target="0"></li>
    <li data-target="1"></li>
    <li data-target="2"></li>
  </ol>
</div>

CSS 样式

CSS 样式定义了轮播图的外观，包括尺寸、定位和美观元素。

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

.carousel-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-inner li {
  float: left;
  width: 100%;
  height: 100%;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
}

.carousel-indicators li.active {
  background-color: #000;
}

JavaScript 实现

JavaScript 是轮播图功能的核心，负责自动轮播、图片切换和响应用户交互。

const carousel = document.querySelector('.carousel');
const carouselInner = carousel.querySelector('.carousel-inner');
const carouselIndicators = carousel.querySelector('.carousel-indicators');

let currentSlide = 0;
let timerID = null;
let isAutoplaying = false;

function startAutoplay() {
  if (isAutoplaying) {
    return;
  }

  isAutoplaying = true;

  timerID = setInterval(() => {
    nextSlide();
  }, 3000);
}

function stopAutoplay() {
  if (!isAutoplaying) {
    return;
  }

  isAutoplaying = false;

  clearInterval(timerID);
}

function nextSlide() {
  currentSlide++;

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

  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide--;

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

  showSlide(currentSlide);
}

function showSlide(slideIndex) {
  const slides = carouselInner.children;

  for (let i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }

  slides[slideIndex].classList.add('active');

  const indicators = carouselIndicators.children;

  for (let i = 0; i < indicators.length; i++) {
    indicators[i].classList.remove('active');
  }

  indicators[slideIndex].classList.add('active');
}

事件监听器

事件监听器响应用户的交互，例如鼠标悬停、点击和导航按钮。

carousel.addEventListener('mouseover', () => {
  stopAutoplay();
});

carousel.addEventListener('mouseleave', () => {
  startAutoplay();
});

carouselIndicators.addEventListener('click', (e) => {
  const target = e.target;

  if (target.tagName !== 'LI') {
    return;
  }

  const slideIndex = parseInt(target.dataset.target);

  showSlide(slideIndex);
});

document.querySelector('.carousel-control-prev').addEventListener('click', () => {
  prevSlide();
});

document.querySelector('.carousel-control-next').addEventListener('click', () => {
  nextSlide();
});