轮播图制作新思路：纯原生无缝衔接，装饰器模式助你解锁优雅代码

2023-09-12 06:37:32

摘要

在2022年的今天，手撕原生轮播图依然是一门必备技能。本文将带领各位探索原生轮播图的制作奥秘，摒弃第三方库，用纯粹的代码构建无缝轮播效果。同时，我们还将运用装饰器模式，将轮播图下标更新逻辑与样式切换逻辑解耦，打造数据和视图分离的优雅代码。

引言

轮播图是一种常见而实用的UI组件，广泛应用于网站、APP等各种场景。传统的轮播图实现方式往往依赖于第三方库，但这些库可能存在体积庞大、性能开销高等问题。本文将带你领略原生轮播图的魅力，用轻盈的代码实现流畅的轮播效果。

纯原生轮播图实现

1. HTML结构

<div class="carousel">
  <ul class="slides">
    <li><img src="image1.jpg" alt="Image 1" /></li>
    <li><img src="image2.jpg" alt="Image 2" /></li>
    <li><img src="image3.jpg" alt="Image 3" /></li>
  </ul>
  <div class="indicators">
    <button data-index="0"></button>
    <button data-index="1"></button>
    <button data-index="2"></button>
  </div>
</div>

2. JavaScript逻辑

const carousel = document.querySelector('.carousel');
const slides = carousel.querySelector('.slides');
const indicators = carousel.querySelector('.indicators');
let currentSlideIndex = 0;

const updateSlide = (index) => {
  currentSlideIndex = index;
  slides.style.transform = `translateX(-${index * 100}%)`;
  indicators.children[currentSlideIndex].classList.add('active');
};

const handleIndicatorClick = (event) => {
  const index = event.target.dataset.index;
  updateSlide(index);
};

indicators.addEventListener('click', handleIndicatorClick);

3. CSS样式

.carousel {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slides li {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
}

.indicators button {
  margin: 0 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
}

.indicators button.active {
  background-color: #fff;
}

装饰器模式解耦

原生轮播图实现的基础上，我们可以使用装饰器模式进一步解耦轮播图下标更新逻辑与样式切换逻辑。

class CarouselDecorator {
  constructor(carousel) {
    this.carousel = carousel;
  }

  updateSlide(index) {
    this.carousel.currentSlideIndex = index;
    this.carousel.slides.style.transform = `translateX(-${index * 100}%)`;
  }

  updateIndicator() {
    const activeIndicator = this.carousel.indicators.querySelector('.active');
    if (activeIndicator) {
      activeIndicator.classList.remove('active');
    }
    this.carousel.indicators.children[this.carousel.currentSlideIndex].classList.add('active');
  }
}

const carouselDecorator = new CarouselDecorator(carousel);

const handleIndicatorClickWithDecorator = (event) => {
  const index = event.target.dataset.index;
  carouselDecorator.updateSlide(index);
  carouselDecorator.updateIndicator();
};

indicators.addEventListener('click', handleIndicatorClickWithDecorator);