轮播图的幕后：纯 JS 实现与用户互动

2024-01-13 10:59:17

纯 JavaScript 制作魅力四射的轮播图：一份循序渐进指南

打造引人入胜的用户体验

轮播图，又称滑块，已成为当今数字世界中无处不在的网站设计元素。从电子商务网站上醒目的产品展示到新闻门户网站上引人入胜的头条新闻，轮播图已成为吸引观众注意力的强大工具。

HTML 结构：构建轮播图的基石

轮播图的 HTML 结构非常简单，它由一个容器元素（通常是 div）和一个或多个图像元素组成。容器元素用于定位图像，而图像元素则用于显示图片。

<div class="carousel">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS 样式：美化轮播图的外观

接下来，我们需要使用 CSS 来美化轮播图的外观。这包括设置容器元素的尺寸和位置，以及调整图像的大小和位置。

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

.carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

JavaScript 交互：赋予轮播图生命

现在，轮到 JavaScript 发挥作用了。我们需要编写 JavaScript 代码来实现轮播图的交互功能，包括点击按钮切换图片、自动播放图片、鼠标移动到图片上方则停止播放图片，移开则继续自动播放，以及随图片的移动而改变小圆圈。

代码示例：

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

// 获取轮播图中的所有图像元素
const images = carousel.querySelectorAll('img');

// 获取轮播图的按钮元素
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');

// 获取轮播图的圆圈元素
const dots = document.querySelectorAll('.dot');

// 设置当前显示的图片索引
let currentImageIndex = 0;

// 自动播放轮播图
let autoplayInterval = setInterval(() => {
  nextImage();
}, 3000);

// 停止自动播放轮播图
carousel.addEventListener('mouseover', () => {
  clearInterval(autoplayInterval);
});

// 继续自动播放轮播图
carousel.addEventListener('mouseout', () => {
  autoplayInterval = setInterval(() => {
    nextImage();
  }, 3000);
});

// 点击按钮切换图片
prevButton.addEventListener('click', () => {
  prevImage();
});

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

// 随图片的移动而改变小圆圈
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    currentImageIndex = index;
    updateImage();
  });
});

// 更新轮播图中的图片
function updateImage() {
  images.forEach((image, index) => {
    image.style.display = index === currentImageIndex ? 'block' : 'none';
  });

  dots.forEach((dot, index) => {
    dot.classList.remove('active');
  });

  dots[currentImageIndex].classList.add('active');
}

// 显示下一张图片
function nextImage() {
  currentImageIndex++;

  if (currentImageIndex >= images.length) {
    currentImageIndex = 0;
  }

  updateImage();
}

// 显示上一张图片
function prevImage() {
  currentImageIndex--;

  if (currentImageIndex < 0) {
    currentImageIndex = images.length - 1;
  }

  updateImage();
}