当前位置：首页 > JavaScript

js中轮播图怎么实现

2026-03-01 23:57:07JavaScript

使用原生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样式 设置基本布局和过渡效果：

js中轮播图怎么实现

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}
.slide.active {
  opacity: 1;
}

JavaScript逻辑 实现自动播放和手动切换功能：

document.addEventListener('DOMContentLoaded', function() {
  const slides = document.querySelectorAll('.slide');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');
  let currentIndex = 0;

  function showSlide(index) {
    slides.forEach(slide => slide.classList.remove('active'));
    slides[index].classList.add('active');
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
  }

  nextBtn.addEventListener('click', nextSlide);
  prevBtn.addEventListener('click', prevSlide);

  // 自动播放
  let interval = setInterval(nextSlide, 3000);

  // 鼠标悬停暂停
  document.querySelector('.slider').addEventListener('mouseenter', () => {
    clearInterval(interval);
  });

  document.querySelector('.slider').addEventListener('mouseleave', () => {
    interval = setInterval(nextSlide, 3000);
  });
});

使用Swiper库实现

安装Swiper库：

js中轮播图怎么实现

npm install swiper

基础实现代码：

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

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

使用CSS动画实现

纯CSS解决方案：

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

.slider {
  display: flex;
  width: 400%;
  animation: slide 12s infinite;
}