当前位置：首页 > JavaScript

js轮播怎么实现的

2026-04-04 17:25:16JavaScript

使用纯JavaScript实现轮播

创建一个基础的HTML结构，包含轮播容器、图片列表和导航按钮：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" class="slide active">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
  <button class="prev">❮</button>
  <button class="next">❯</button>
</div>

添加CSS样式控制轮播布局：

.slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
}

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

.slide {
  min-width: 100%;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

JavaScript实现轮播逻辑：

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;

function showSlide(index) {
  slides.forEach(slide => slide.classList.remove('active'));
  slides[index].classList.add('active');
  document.querySelector('.slides').style.transform = `translateX(-${index * 100}%)`;
}

document.querySelector('.next').addEventListener('click', () => {
  currentSlide = (currentSlide + 1) % totalSlides;
  showSlide(currentSlide);
});

document.querySelector('.prev').addEventListener('click', () => {
  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
  showSlide(currentSlide);
});

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

使用Swiper.js库实现

安装Swiper.js：

js轮播怎么实现的

npm install swiper
# 或通过CDN引入

HTML结构：

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
    <div class="swiper-slide"><img src="image3.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

初始化Swiper：

js轮播怎么实现的

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

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

使用CSS动画实现

利用CSS的@keyframes实现自动轮播：

.slides {
  animation: slide 12s infinite;
}

@keyframes slide {
  0% { transform: translateX(0); }
  25% { transform: translateX(-100%); }
  50% { transform: translateX(-200%); }
  75% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

响应式轮播实现

添加媒体查询调整轮播行为：

@media (max-width: 768px) {
  .slider {
    max-width: 100%;
  }

  button {
    padding: 5px;
    font-size: 12px;
  }
}

JavaScript中添加触摸事件支持：

let startX, moveX;
const slider = document.querySelector('.slider');

slider.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

slider.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
});

slider.addEventListener('touchend', () => {
  if (startX - moveX > 50) {
    // 向左滑动，显示下一张
    currentSlide = (currentSlide + 1) % totalSlides;
  } else if (moveX - startX > 50) {
    // 向右滑动，显示上一张
    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
  }
  showSlide(currentSlide);
});

标签: js