化繁为简，巧用纯 CSS 实现流畅轮播效果

2023-11-29 08:37:42







## 纯 CSS 轮播的优势

使用纯 CSS 实现轮播效果具有以下几个优势：

* **更简单** ：CSS 代码更加简洁，易于理解和维护。
* **更有效率** ：纯 CSS 轮播不需要额外的脚本文件，因此加载速度更快。
* **兼容性更强** ：纯 CSS 轮播在各种浏览器中都能正常工作，兼容性更好。

## 实现步骤

### HTML 结构

```html
<div class="carousel">
  <div class="slides">
    <div class="slide active">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="slide">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="slide">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
  <div class="controls">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
  </div>
</div>

CSS 代码

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

.slides {
  display: flex;
  flex-direction: row;
  transition: transform 1s ease-in-out;
}

.slide {
  flex: 1;
  height: 100%;
}

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

.controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls button {
  margin: 0 10px;
  padding: 5px 10px;
  border: 1px solid black;
  border-radius: 5px;
  cursor: pointer;
}

.active {
  transform: translateX(0);
}

.next {
  margin-left: 10px;
}

.prev {
  margin-right: 10px;
}

JavaScript 代码

const carousel = document.querySelector('.carousel');
const slides = document.querySelector('.slides');
const controls = document.querySelector('.controls');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');

let currentSlide = 0;

const slideWidth = slides.children[0].offsetWidth;

slides.style.transform = `translateX(-${currentSlide * slideWidth}px)`;

prev.addEventListener('click', () => {
  if (currentSlide > 0) {
    currentSlide--;
    slides.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
  }
});

next.addEventListener('click', () => {
  if (currentSlide < slides.children.length - 1) {
    currentSlide++;
    slides.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
  }
});