h5 实现轮播

使用Swiper库实现H5轮播

Swiper是目前最流行的移动端触摸滑动插件，专门为移动设备优化，支持多种滑动效果。

安装Swiper：

npm install swiper
# 或
yarn add swiper

基础HTML结构：

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <!-- 分页器 -->
  <div class="swiper-pagination"></div>

  <!-- 导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

初始化JavaScript：

import Swiper from 'swiper';
import 'swiper/css';

const swiper = new Swiper('.swiper', {
  direction: 'horizontal',
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

纯CSS实现简单轮播

通过CSS动画和overflow:hidden实现基础轮播效果，适合简单场景。

HTML结构：

<div class="carousel">
  <div class="slides">
    <div class="slide">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
  </div>
</div>

CSS样式：

.carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slides {
  display: flex;
  width: 300%;
  animation: slide 10s infinite;
}

.slide {
  width: 33.33%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-33.33%); }
  66% { transform: translateX(-66.66%); }
}

使用原生JavaScript实现

通过JavaScript控制DOM元素位置实现手动轮播，提供更好的交互控制。

HTML结构：

<div class="slider">
  <div class="slide-container">
    <div class="slide">内容1</div>
    <div class="slide">内容2</div>
    <div class="slide">内容3</div>
  </div>
  <button class="prev">上一张</button>
  <button class="next">下一张</button>
</div>

JavaScript实现：

const container = document.querySelector('.slide-container');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');

let currentIndex = 0;
const slideWidth = slides[0].clientWidth;

function updateSlider() {
  container.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
}

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlider();
});

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  updateSlider();
});

响应式设计注意事项

确保轮播在不同设备上正常显示需要添加响应式处理：

/* 基础样式 */
.slide {
  width: 100%;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .slides {
    transition: transform 0.3s ease;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

性能优化建议

减少重绘和回流：

// 使用transform代替left/top
slide.style.transform = `translateX(${position}px)`;

// 使用requestAnimationFrame
function animate() {
  requestAnimationFrame(animate);
  // 动画逻辑
}

懒加载图片：

<div class="swiper-slide">
  <img data-src="image.jpg" class="swiper-lazy">
  <div class="swiper-lazy-preloader"></div>
</div>

初始化时启用懒加载：

const swiper = new Swiper('.swiper', {
  lazy: {
    loadPrevNext: true,
  },
});