原生JS打造手写轮播图，尽享视觉盛宴

前端

2023-07-09 11:26:20

邂逅原生 JS 手写轮播图：解锁前端开发的新境界

什么是轮播图？

轮播图，也被称为幻灯片，是网站或应用程序中用于循环展示多张图片或内容的交互式组件。它们广泛用于展示产品、服务、新闻或其他引人注目的信息，提升用户参与度，美化页面。

原生 JS 手写轮播图：轻量级、可定制且跨平台

随着前端技术的发展，涌现了众多轮播图插件和解决方案。然而，原生 JS 手写轮播图以其轻量级、高度可定制性和跨平台兼容性而受到开发者的青睐。

从头构建原生 JS 轮播图

创建轮播图容器 ：创建一个 HTML 容器（例如 div 或 section）来容纳轮播图，并指定一个类名或 ID 用于样式控制。
添加轮播图图片或内容 ：在容器中插入要展示的图片（img 元素）或其他媒体内容（如文本或视频）。
应用 CSS 样式 ：为轮播图设置样式，包括宽度、高度、背景颜色、图片大小和位置等。
添加交互性 ：使用 JavaScript 代码实现轮播图的交互性，例如自动播放、手动切换和滑动切换。

代码示例

HTML：

<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：

.carousel {
  width: 100%;
  height: 300px;
  background-color: #fff;
  overflow: hidden;
}

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

JavaScript：

const carousel = document.querySelector('.carousel');
const slides = carousel.querySelectorAll('img');
let currentSlide = 0;

// 自动轮播
setInterval(() => {
  currentSlide = (currentSlide + 1) % slides.length;
  carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
}, 3000);

// 手动切换
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');

prevButton.addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + slides.length) % slides.length;
  carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
});

nextButton.addEventListener('click', () => {
  currentSlide = (currentSlide + 1) % slides.length;
  carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
});

// 滑动切换
carousel.addEventListener('touchstart', (e) => {
  const startX = e.touches[0].clientX;

  carousel.addEventListener('touchmove', (e) => {
    const moveX = e.touches[0].clientX;
    const offsetX = moveX - startX;

    carousel.style.transform = `translateX(-${currentSlide * 100 + offsetX}%)`;
  });
});

carousel.addEventListener('touchend', () => {
  if (offsetX > 50) {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
    carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
  } else if (offsetX < -50) {
    currentSlide = (currentSlide + 1) % slides.length;
    carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
  }
});