H5 不复制元素，实现元素循环轮播的取模思路

2023-09-28 08:52:42

在 H5 页面中，轮播图是一种常用的交互形式，它可以让用户在多个元素之间循环切换。传统的轮播图实现方案通常需要复制元素，例如实现一个包含 5 个元素的轮播图需要使用 7 个元素，多出的 2 个元素分别作为头部和尾部。

然而，这种复制元素的实现方式存在一些缺点，例如：

增加内存占用：复制元素会增加页面的内存占用，在移动设备上尤其明显。
代码冗余：复制元素会导致代码冗余，降低代码可维护性。
性能问题：复制元素可能会导致性能问题，尤其是在处理大尺寸图像时。

因此，本文将介绍一种不复制元素的 H5 轮播图实现方案，它采用取模的思路来实现元素的循环切换。

取模思路

取模思路是一种数学技巧，它可以将一个数字除以另一个数字并返回余数。在我们的轮播图实现中，我们可以使用取模来确定当前显示的元素。

假设我们有一个包含 5 个元素的轮播图，当前显示的元素索引为 2。当用户向右滑动时，元素索引增加 1，此时取模 5 的结果为 3，表示当前显示的元素索引变为 3。同理，当用户向左滑动时，元素索引减小 1，取模 5 的结果为 1，表示当前显示的元素索引变为 1。

代码实现

以下代码展示了如何使用取模思路实现不复制元素的 H5 轮播图：

const carousel = document.querySelector('.carousel');
const slides = carousel.querySelectorAll('.slide');
const nextButton = carousel.querySelector('.next-button');
const prevButton = carousel.querySelector('.prev-button');

let currentSlideIndex = 0;

function showSlide(slideIndex) {
  slides.forEach(slide => slide.style.display = 'none');
  slides[slideIndex].style.display = 'block';
}

function nextSlide() {
  currentSlideIndex++;
  currentSlideIndex = currentSlideIndex % slides.length;
  showSlide(currentSlideIndex);
}

function prevSlide() {
  currentSlideIndex--;
  currentSlideIndex = currentSlideIndex % slides.length;
  showSlide(currentSlideIndex);
}

nextButton.addEventListener('click', nextSlide);
prevButton.addEventListener('click', prevSlide);