当前位置：首页 > JavaScript

js实现录轮播图

2026-01-31 04:53:31JavaScript

实现轮播图的基本思路

轮播图的核心逻辑是通过定时切换图片或内容，实现自动播放和手动切换功能。以下是一个基于原生JavaScript的实现方案。

js实现录轮播图

HTML结构

创建一个包含轮播图项的容器，以及导航按钮和指示器（可选）。

js实现录轮播图

<div class="carousel-container">
  <div class="carousel-slide">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <button class="prev-btn">❮</button>
  <button class="next-btn">❯</button>
  <div class="nav-dots"></div>
</div>

CSS样式

设置轮播图容器的基本样式，确保每次只显示一张图片。

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

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

.carousel-slide img {
  min-width: 100%;
  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; }

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

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

.dot.active {
  background: white;
}

JavaScript逻辑

实现轮播图的自动播放、手动切换和指示器功能。

document.addEventListener('DOMContentLoaded', () => {
  const slide = document.querySelector('.carousel-slide');
  const images = document.querySelectorAll('.carousel-slide img');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  const dotsContainer = document.querySelector('.nav-dots');

  let counter = 0;
  const size = images[0].clientWidth;

  // 创建指示器
  images.forEach((_, index) => {
    const dot = document.createElement('span');
    dot.classList.add('dot');
    if (index === 0) dot.classList.add('active');
    dot.addEventListener('click', () => {
      counter = index;
      updateSlide();
    });
    dotsContainer.appendChild(dot);
  });

  // 更新轮播图位置和指示器状态
  function updateSlide() {
    slide.style.transform = `translateX(${-counter * size}px)`;
    document.querySelectorAll('.dot').forEach((dot, index) => {
      dot.classList.toggle('active', index === counter);
    });
  }

  // 下一张图片
  function nextSlide() {
    if (counter >= images.length - 1) counter = -1;
    counter++;
    updateSlide();
  }

  // 上一张图片
  function prevSlide() {
    if (counter <= 0) counter = images.length;
    counter--;
    updateSlide();
  }

  // 按钮事件
  nextBtn.addEventListener('click', nextSlide);
  prevBtn.addEventListener('click', prevSlide);

  // 自动播放
  let interval = setInterval(nextSlide, 3000);

  // 鼠标悬停时暂停自动播放
  slide.addEventListener('mouseenter', () => {
    clearInterval(interval);
  });

  // 鼠标离开时恢复自动播放
  slide.addEventListener('mouseleave', () => {
    interval = setInterval(nextSlide, 3000);
  });
});