当前位置：首页 > JavaScript

js实现广告轮播

2026-04-04 13:24:19JavaScript

实现广告轮播的基本思路

广告轮播通常通过定时切换展示的广告内容实现，核心是利用JavaScript控制DOM元素的显示与隐藏，结合CSS动画或过渡效果提升用户体验。

HTML结构搭建

创建一个包含轮播内容的容器，通常使用无序列表或div嵌套实现。每个广告项可以包含图片、文字或其他HTML元素。

<div class="slider-container">
  <div class="slider-wrapper">
    <div class="slide active"><img src="ad1.jpg"></div>
    <div class="slide"><img src="ad2.jpg"></div>
    <div class="slide"><img src="ad3.jpg"></div>
  </div>
  <div class="slider-controls">
    <button class="prev-btn">Previous</button>
    <button class="next-btn">Next</button>
  </div>
  <div class="slider-dots"></div>
</div>

CSS样式设置

为轮播组件添加基本样式，确保每次只显示一个广告项。使用CSS过渡效果实现平滑切换。

.slider-container {
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 400px;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide.active {
  opacity: 1;
}

.slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background: #333;
}

JavaScript核心逻辑

实现自动轮播和手动控制功能，包括前进、后退和指示器跳转。

js实现广告轮播

class Slider {
  constructor(container) {
    this.container = document.querySelector(container);
    this.slides = this.container.querySelectorAll('.slide');
    this.prevBtn = this.container.querySelector('.prev-btn');
    this.nextBtn = this.container.querySelector('.next-btn');
    this.dotsContainer = this.container.querySelector('.slider-dots');
    this.currentIndex = 0;
    this.interval = null;
    this.autoPlayDelay = 3000;

    this.initDots();
    this.setupEventListeners();
    this.startAutoPlay();
    this.showSlide(this.currentIndex);
  }

  initDots() {
    this.slides.forEach((_, index) => {
      const dot = document.createElement('div');
      dot.classList.add('dot');
      if (index === this.currentIndex) dot.classList.add('active');
      dot.addEventListener('click', () => this.goToSlide(index));
      this.dotsContainer.appendChild(dot);
    });
  }

  setupEventListeners() {
    this.prevBtn.addEventListener('click', () => this.prevSlide());
    this.nextBtn.addEventListener('click', () => this.nextSlide());
    this.container.addEventListener('mouseenter', () => this.stopAutoPlay());
    this.container.addEventListener('mouseleave', () => this.startAutoPlay());
  }

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

    const dots = this.dotsContainer.querySelectorAll('.dot');
    dots.forEach(dot => dot.classList.remove('active'));
    dots[index].classList.add('active');

    this.currentIndex = index;
  }

  nextSlide() {
    let newIndex = this.currentIndex + 1;
    if (newIndex >= this.slides.length) newIndex = 0;
    this.showSlide(newIndex);
  }

  prevSlide() {
    let newIndex = this.currentIndex - 1;
    if (newIndex < 0) newIndex = this.slides.length - 1;
    this.showSlide(newIndex);
  }

  goToSlide(index) {
    this.showSlide(index);
  }

  startAutoPlay() {
    this.interval = setInterval(() => this.nextSlide(), this.autoPlayDelay);
  }

  stopAutoPlay() {
    clearInterval(this.interval);
  }
}

// 初始化轮播
new Slider('.slider-container');