js 实现轮播

2026-01-31 16:44:38JavaScript

实现基础轮播效果

使用HTML结构搭建轮播容器，包含图片列表和导航按钮：

<div class="slider">
  <div class="slides">
    <img src="image1.jpg" class="slide active">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
  <button class="prev">❮</button>
  <button class="next">❯</button>
</div>

CSS样式控制轮播布局和过渡效果：

.slider {
  position: relative;
  width: 500px;
  overflow: hidden;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
}
.slide.active {
  display: block;
}
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.prev { left: 10px; }
.next { right: 10px; }

JavaScript实现核心轮播逻辑：

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

function showSlide(index) {
  slides.forEach(slide => slide.classList.remove('active'));
  currentSlide = (index + totalSlides) % totalSlides;
  slides[currentSlide].classList.add('active');
  document.querySelector('.slides').style.transform = 
    `translateX(-${currentSlide * 100}%)`;
}

document.querySelector('.next').addEventListener('click', () => {
  showSlide(currentSlide + 1);
});

document.querySelector('.prev').addEventListener('click', () => {
  showSlide(currentSlide - 1);
});

添加自动轮播功能

扩展JavaScript代码实现定时自动播放：

let slideInterval = setInterval(() => {
  showSlide(currentSlide + 1);
}, 3000);

// 鼠标悬停暂停轮播
document.querySelector('.slider').addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

// 鼠标离开恢复轮播
document.querySelector('.slider').addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    showSlide(currentSlide + 1);
  }, 3000);
});

添加指示器导航

HTML添加指示器元素：

<div class="indicators"></div>

JavaScript动态生成指示器并添加交互：

const indicators = document.querySelector('.indicators');

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

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

// 修改showSlide函数
function showSlide(index) {
  // ...原有代码...
  updateIndicators();
}

响应式设计优化

使用CSS媒体查询适配不同屏幕：

@media (max-width: 768px) {
  .slider {
    width: 100%;
  }
  button {
    font-size: 24px;
  }
}

JavaScript动态计算轮播容器宽度：

function initSlider() {
  const sliderWidth = document.querySelector('.slider').offsetWidth;
  document.querySelector('.slides').style.width = 
    `${sliderWidth * totalSlides}px`;
  slides.forEach(slide => {
    slide.style.width = `${sliderWidth}px`;
  });
}

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

js 实现轮播