一步一滑动，轮播动起来

2024-02-20 14:46:09

前言

轮播图是一种常见的网页元素，它可以用来展示一组图片或其他内容。轮播图通常是自动播放的，但也可以通过点击按钮或拖动来控制。

在本文中，我们将使用原生JS实现一个轮播图。我们将使用CSS的transform、transition等属性以及JS的touchstart、touchmove、touchend等触摸事件来实现轮播图的功能。

开始实现

首先，我们需要创建一个HTML结构来存放轮播图。我们可以使用<div>元素来创建一个容器，然后在容器中添加<img>元素来显示图片。

<div id="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

接下来，我们需要使用CSS来设置轮播图的样式。我们可以使用transform属性来移动轮播图中的图片，使用transition属性来实现平滑的过渡效果。

#slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

#slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#slider .active {
  transform: translateX(0);
}

#slider .inactive {
  transform: translateX(100%);
}

最后，我们需要使用JS来实现轮播图的交互功能。我们可以使用touchstart、touchmove和touchend事件来检测用户的触摸动作，然后使用transform属性来移动轮播图中的图片。

const slider = document.getElementById('slider');
const images = slider.getElementsByTagName('img');

let currentImageIndex = 0;

slider.addEventListener('touchstart', (event) => {
  startX = event.touches[0].clientX;
});

slider.addEventListener('touchmove', (event) => {
  const deltaX = event.touches[0].clientX - startX;

  if (deltaX > 0) {
    // 向右滑动
    if (currentImageIndex > 0) {
      images[currentImageIndex].classList.remove('active');
      images[currentImageIndex].classList.add('inactive');

      currentImageIndex--;

      images[currentImageIndex].classList.remove('inactive');
      images[currentImageIndex].classList.add('active');
    }
  } else {
    // 向左滑动
    if (currentImageIndex < images.length - 1) {
      images[currentImageIndex].classList.remove('active');
      images[currentImageIndex].classList.add('inactive');

      currentImageIndex++;

      images[currentImageIndex].classList.remove('inactive');
      images[currentImageIndex].classList.add('active');
    }
  }
});