原生 JavaScript：迈出轮播图开发的第一步

2023-12-26 15:57:27

走马灯轮播图的起源

走马灯轮播图是一种经典的图片展示方式，它可以将多张图片按顺序排列，并以一定的间隔自动播放，从而吸引观众的注意力。走马灯轮播图最早出现在 19 世纪的欧洲，当时的人们使用油画或玻璃幻灯片来制作走马灯轮播图。随着技术的发展，走马灯轮播图逐渐从传统的物理媒体转向了数字媒体，并被广泛应用于网站、应用程序和社交媒体等各种平台。

HTML结构

<div id="carousel" class="carousel">
  <ul class="carousel-inner">
    <li class="carousel-item active">
      <img src="image1.jpg" alt="Image 1">
    </li>
    <li class="carousel-item">
      <img src="image2.jpg" alt="Image 2">
    </li>
    <li class="carousel-item">
      <img src="image3.jpg" alt="Image 3">
    </li>
  </ul>
  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

在HTML中，我们首先创建了一个<div>元素，并为其设置了ID“carousel”，表示这是一个轮播图。然后，我们创建了一个<ul>元素，并为其设置了class“carousel-inner”，表示这是一个轮播图的内部容器。在<ul>元素中，我们创建了三个<li>元素，每个<li>元素都表示一个轮播图的项目。每个<li>元素中，我们创建了一个<img>元素，并为其设置了src属性和alt属性，表示轮播图的图片和图片的文字。

JavaScript实现

// 获取轮播图元素
const carousel = document.getElementById('carousel');

// 获取轮播图的所有项目元素
const carouselItems = carousel.querySelectorAll('.carousel-item');

// 获取轮播图的左右控制按钮元素
const carouselControlPrev = carousel.querySelector('.carousel-control-prev');
const carouselControlNext = carousel.querySelector('.carousel-control-next');

// 当前显示的轮播图项目的索引
let currentItemIndex = 0;

// 轮播图自动播放的计时器
let autoplayTimerId = null;

// 暂停自动播放
const pauseAutoplay = () => {
  if (autoplayTimerId) {
    clearInterval(autoplayTimerId);
    autoplayTimerId = null;
  }
};

// 恢复自动播放
const resumeAutoplay = () => {
  if (!autoplayTimerId) {
    autoplayTimerId = setInterval(() => {
      nextItem();
    }, 5000);
  }
};

// 显示下一个轮播图项目
const nextItem = () => {
  // 暂停自动播放
  pauseAutoplay();

  // 获取下一个轮播图项目的索引
  currentItemIndex = (currentItemIndex + 1) % carouselItems.length;

  // 显示下一个轮播图项目
  showItem(currentItemIndex);

  // 恢复自动播放
  resumeAutoplay();
};

// 显示上一个轮播图项目
const prevItem = () => {
  // 暂停自动播放
  pauseAutoplay();

  // 获取上一个轮播图项目的索引
  currentItemIndex = (currentItemIndex - 1 + carouselItems.length) % carouselItems.length;

  // 显示上一个轮播图项目
  showItem(currentItemIndex);

  // 恢复自动播放
  resumeAutoplay();
};

// 显示指定索引的轮播图项目
const showItem = (index) => {
  // 隐藏所有轮播图项目
  for (let i = 0; i < carouselItems.length; i++) {
    carouselItems[i].classList.remove('active');
  }

  // 显示指定索引的轮播图项目
  carouselItems[index].classList.add('active');
};

// 添加事件监听器
carouselControlPrev.addEventListener('click', prevItem);
carouselControlNext.addEventListener('click', nextItem);

// 自动播放轮播图
resumeAutoplay();