当前位置：首页 > JavaScript

js实现广告轮播的实现

2026-04-07 06:17:30JavaScript

广告轮播实现方法

使用纯JavaScript实现

通过定时器和DOM操作实现基础轮播效果。

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

function showSlide(n) {
  slides.forEach(slide => slide.style.display = 'none');
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].style.display = 'block';
}

function nextSlide() {
  showSlide(currentSlide + 1);
}

// 自动轮播
setInterval(nextSlide, 3000);

// 初始化显示第一张
showSlide(0);

使用CSS过渡效果

结合CSS过渡实现平滑切换动画。

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let index = 0;

function slide() {
  index = (index + 1) % slides.length;
  slider.style.transform = `translateX(-${index * 100}%)`;
}

setInterval(slide, 3000);

对应CSS:

.slider {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
}

添加导航控制

实现手动切换和自动播放的组合功能。

const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let autoPlay = setInterval(nextSlide, 3000);

prevBtn.addEventListener('click', () => {
  clearInterval(autoPlay);
  showSlide(currentSlide - 1);
  autoPlay = setInterval(nextSlide, 3000);
});

nextBtn.addEventListener('click', () => {
  clearInterval(autoPlay);
  nextSlide();
  autoPlay = setInterval(nextSlide, 3000);
});

响应式处理

根据窗口大小调整轮播布局。

function resizeHandler() {
  const slideWidth = window.innerWidth;
  slides.forEach(slide => {
    slide.style.width = `${slideWidth}px`;
  });
  slider.style.transform = `translateX(-${index * slideWidth}px)`;
}

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

使用第三方库

推荐使用Swiper.js实现专业级轮播。

js实现广告轮播的实现

import Swiper from 'swiper';

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