实现js轮播

实现 JavaScript 轮播

使用原生 JavaScript 实现轮播

HTML 结构

<div class="slider">
  <div class="slides">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

CSS 样式

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

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

.slide {
  min-width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

JavaScript 代码

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

let currentIndex = 0;
const totalSlides = slideItems.length;

function updateSlider() {
  slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}

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

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

// 自动轮播
setInterval(() => {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateSlider();
}, 3000);

使用 Swiper 库实现轮播

Swiper 是一个流行的轮播库，功能强大且易于使用。

安装 Swiper

npm install 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', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  autoplay: {
    delay: 3000,
  },
});

使用 CSS 动画实现轮播

纯 CSS 轮播适用于简单场景，但交互性较弱。

HTML 结构

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

CSS 样式

.slider {
  width: 100%;
  overflow: hidden;
}

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

.slide {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

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

以上方法提供了从简单到复杂的轮播实现方案，可根据项目需求选择合适的方式。