用行动展现创意：自己动手实现一个轮播图组件

2024-01-19 11:23:21

轮播图原理

轮播图的原理可以总结为两点：

定位的运用
定时器的运用

轮播图的每一张图横向依次排列。通过绝对定位和定时器的配合，可以实现图片的轮播效果。当定时器触发时，当前显示的图片会移动到右侧，而下一张图片则从左侧进入显示区域。如此循环往复，便形成了轮播效果。

轮播图实现

HTML 结构

<div class="carousel">
  <div class="carousel-inner">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="carousel-control-prev">‹</button>
  <button class="carousel-control-next">›</button>
</div>

CSS 样式

.carousel {
  position: relative;
  width: 500px;
  height: 300px;
}

.carousel-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

JavaScript 代码

const carousel = document.querySelector('.carousel');
const carouselInner = carousel.querySelector('.carousel-inner');
const carouselItems = carouselInner.querySelectorAll('img');
const prevBtn = carousel.querySelector('.carousel-control-prev');
const nextBtn = carousel.querySelector('.carousel-control-next');
let currentSlide = 0;

const slideTo = (index) => {
  carouselItems.forEach((item, i) => {
    item.style.transform = `translateX(${100 * (i - index)}%)`;
  });
  currentSlide = index;
};

const nextSlide = () => {
  if (currentSlide === carouselItems.length - 1) {
    slideTo(0);
  } else {
    slideTo(currentSlide + 1);
  }
};

const prevSlide = () => {
  if (currentSlide === 0) {
    slideTo(carouselItems.length - 1);
  } else {
    slideTo(currentSlide - 1);
  }
};

prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);

setInterval(nextSlide, 5000);