当前位置：首页 > JavaScript

js怎么实现轮播

2026-03-01 01:16:37JavaScript

使用纯JavaScript实现轮播

创建一个基本的轮播效果需要HTML、CSS和JavaScript的配合。以下是一个简单的实现方式：

HTML结构

<div class="slider">
  <div class="slides">
    <div class="slide active">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

CSS样式

.slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

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

.slide {
  min-width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: #f0f0f0;
}

.active {
  background: #ccc;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

JavaScript实现

js怎么实现轮播

const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const slidesContainer = document.querySelector('.slides');

let currentIndex = 0;
const totalSlides = slides.length;

function updateSlider() {
  slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
  slides.forEach((slide, index) => {
    slide.classList.toggle('active', index === currentIndex);
  });
}

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
  updateSlider();
});

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateSlider();
});

// 自动轮播
let interval = setInterval(() => {
  currentIndex = (currentIndex + 1) % totalSlides;
  updateSlider();
}, 3000);

// 鼠标悬停时暂停自动轮播
const slider = document.querySelector('.slider');
slider.addEventListener('mouseenter', () => clearInterval(interval));
slider.addEventListener('mouseleave', () => {
  interval = setInterval(() => {
    currentIndex = (currentIndex + 1) % totalSlides;
    updateSlider();
  }, 3000);
});

使用CSS动画实现自动轮播

可以仅使用CSS实现简单的自动轮播效果：

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-100%); }
  66% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

.slides {
  animation: slide 9s infinite;
}

响应式轮播实现

确保轮播在不同屏幕尺寸下正常工作：

function handleResize() {
  const slideWidth = document.querySelector('.slider').offsetWidth;
  slides.forEach(slide => {
    slide.style.width = `${slideWidth}px`;
  });
  updateSlider();
}

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

添加指示器

为轮播添加导航指示点：

js怎么实现轮播

HTML添加

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

JavaScript扩展

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

// 创建指示器
for (let i = 0; i < totalSlides; i++) {
  const dot = document.createElement('div');
  dot.classList.add('indicator');
  if (i === 0) dot.classList.add('active');
  dot.addEventListener('click', () => {
    currentIndex = i;
    updateSlider();
  });
  indicators.appendChild(dot);
}

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

触摸支持

添加触摸事件支持移动设备：

let touchStartX = 0;
let touchEndX = 0;

slidesContainer.addEventListener('touchstart', (e) => {
  touchStartX = e.changedTouches[0].screenX;
});

slidesContainer.addEventListener('touchend', (e) => {
  touchEndX = e.changedTouches[0].screenX;
  handleSwipe();
});

function handleSwipe() {
  if (touchEndX < touchStartX - 50) {
    currentIndex = (currentIndex + 1) % totalSlides;
  }
  if (touchEndX > touchStartX + 50) {
    currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
  }
  updateSlider();
}

标签: js