js实现广告轮播的实现

广告轮播的实现方法

广告轮播（Carousel）是网页中常见的动态展示多张广告或图片的组件。以下通过纯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="carousel-prev">←</button>
  <button class="carousel-next">→</button>
  <div class="carousel-dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS样式

添加基础样式确保轮播布局正确：

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

.carousel-slides {
  display: flex;
  width: 100%;
  height: 100%;
}

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

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

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

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

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

.dot.active { background: #333; }

JavaScript逻辑

实现自动轮播、手动切换及指示器联动功能：

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

  // 切换到指定索引的幻灯片
  function goToSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.toggle('active', i === index);
    });
    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === index);
    });
    currentIndex = index;
  }

  // 下一张幻灯片
  function nextSlide() {
    const newIndex = (currentIndex + 1) % slides.length;
    goToSlide(newIndex);
  }

  // 上一张幻灯片
  function prevSlide() {
    const newIndex = (currentIndex - 1 + slides.length) % slides.length;
    goToSlide(newIndex);
  }

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

  // 停止自动轮播
  function stopAutoPlay() {
    clearInterval(intervalId);
  }

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

  prevBtn.addEventListener('click', () => {
    prevSlide();
    stopAutoPlay();
    startAutoPlay();
  });

  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      goToSlide(index);
      stopAutoPlay();
      startAutoPlay();
    });
  });

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

  // 初始化自动轮播
  startAutoPlay();
});

扩展功能

如需添加淡入淡出效果，可修改CSS和切换逻辑：

.slide {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide.active {
  opacity: 1;
}

对应JavaScript需调整goToSlide函数：

function goToSlide(index) {
  slides.forEach(slide => slide.classList.remove('active'));
  dots.forEach(dot => dot.classList.remove('active'));

  slides[index].classList.add('active');
  dots[index].classList.add('active');
  currentIndex = index;
}

响应式适配

通过监听窗口大小变化调整轮播尺寸：

function updateCarouselSize() {
  const container = document.querySelector('.carousel-container');
  container.style.height = `${container.offsetWidth * 0.666}px`; // 保持16:9比例
}

window.addEventListener('resize', updateCarouselSize);
updateCarouselSize(); // 初始化