当前位置：首页 > JavaScript

如何实现轮播图js

2026-03-01 19:42:38JavaScript

使用纯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: 600px;
  height: 400px;
  overflow: hidden;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
}
.slide.active {
  display: block;
}
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

编写JavaScript控制逻辑

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

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.toggle('active', i === index);
  });
}

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

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

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

使用Swiper.js库实现

安装Swiper.js库

npm install swiper

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

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,
  }
});

响应式轮播图实现

添加媒体查询调整轮播图尺寸

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

JavaScript中添加窗口大小监听

function adjustSliderSize() {
  const slider = document.querySelector('.slider');
  if (window.innerWidth < 768) {
    slider.style.height = '300px';
  } else {
    slider.style.height = '400px';
  }
}

window.addEventListener('resize', adjustSliderSize);
adjustSliderSize();

添加过渡动画效果

CSS中添加动画关键帧

@keyframes fade {
  from { opacity: 0.4 }
  to { opacity: 1 }
}
.slide {
  animation: fade 1.5s;
}

JavaScript修改切换函数

如何实现轮播图js

function showSlide(index) {
  slides.forEach(slide => {
    slide.style.opacity = 0;
    slide.classList.remove('active');
  });

  slides[index].style.opacity = 1;
  slides[index].classList.add('active');
}