当前位置：首页 > JavaScript

js实现广告轮播

2026-03-01 12:40:55JavaScript

实现广告轮播的基本思路

广告轮播通常通过定时切换图片或内容实现，核心逻辑包括自动轮播、手动切换、动画效果等。以下是一个基于原生JavaScript的实现方案。

HTML结构

基础的HTML结构需要包含轮播容器、图片列表及导航按钮或指示器：

<div class="carousel-container">
  <div class="carousel-slides">
    <img src="image1.jpg" class="slide active">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
  <button class="prev-btn">❮</button>
  <button class="next-btn">❯</button>
  <div class="indicators"></div>
</div>

CSS样式

为轮播组件添加基础样式，确保视觉呈现正确：

.carousel-container {
  position: relative;
  width: 800px;
  height: 400px;
  overflow: hidden;
  margin: 0 auto;
}

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

.slide {
  min-width: 100%;
  height: 400px;
  object-fit: cover;
}

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

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

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

.indicators span {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.indicators span.active {
  background: white;
}

JavaScript逻辑

通过JavaScript实现自动轮播和手动控制功能：

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

  // 创建指示器
  slides.forEach((_, index) => {
    const indicator = document.createElement('span');
    indicator.addEventListener('click', () => goToSlide(index));
    indicators.appendChild(indicator);
  });

  updateIndicators();

  // 自动轮播
  function startAutoPlay() {
    intervalId = setInterval(() => {
      nextSlide();
    }, 3000);
  }

  function stopAutoPlay() {
    clearInterval(intervalId);
  }

  // 切换幻灯片
  function goToSlide(index) {
    slides[currentIndex].classList.remove('active');
    currentIndex = (index + slides.length) % slides.length;
    slides[currentIndex].classList.add('active');
    updateIndicators();
  }

  function nextSlide() {
    goToSlide(currentIndex + 1);
  }

  function prevSlide() {
    goToSlide(currentIndex - 1);
  }

  // 更新指示器状态
  function updateIndicators() {
    const dots = document.querySelectorAll('.indicators span');
    dots.forEach((dot, index) => {
      dot.classList.toggle('active', index === currentIndex);
    });
  }

  // 事件监听
  prevBtn.addEventListener('click', () => {
    prevSlide();
    stopAutoPlay();
    startAutoPlay();
  });

  nextBtn.addEventListener('click', () => {
    nextSlide();
    stopAutoPlay();
    startAutoPlay();
  });

  // 鼠标悬停暂停
  document.querySelector('.carousel-container').addEventListener('mouseenter', stopAutoPlay);
  document.querySelector('.carousel-container').addEventListener('mouseleave', startAutoPlay);

  startAutoPlay();
});