简单js实现轮播

2026-01-30 17:31:56JavaScript

实现基础轮播图

使用HTML和CSS创建基本结构，JavaScript实现轮播逻辑：

<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>

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

JavaScript轮播逻辑

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

function updateSlide() {
  slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
  slides.forEach(slide => slide.classList.remove('active'));
  slides[currentIndex].classList.add('active');
}

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlide();
});

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  updateSlide();
});

// 自动轮播
setInterval(() => {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlide();
}, 3000);

添加指示器

在HTML中添加指示器元素：

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

JavaScript部分添加指示器逻辑：

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

function createIndicators() {
  slides.forEach((_, index) => {
    const indicator = document.createElement('div');
    indicator.classList.add('indicator');
    if(index === 0) indicator.classList.add('active');
    indicator.addEventListener('click', () => {
      currentIndex = index;
      updateSlide();
    });
    indicatorsContainer.appendChild(indicator);
  });
}

function updateIndicators() {
  document.querySelectorAll('.indicator').forEach((ind, index) => {
    ind.classList.toggle('active', index === currentIndex);
  });
}

// 在updateSlide函数中调用
function updateSlide() {
  slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
  slides.forEach(slide => slide.classList.remove('active'));
  slides[currentIndex].classList.add('active');
  updateIndicators();
}

createIndicators();

触摸支持

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

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) % slides.length;
  }
  if(touchEndX > touchStartX + 50) {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  }
  updateSlide();
}

性能优化

添加过渡结束事件处理：

简单js实现轮播

let isTransitioning = false;

slidesContainer.addEventListener('transitionstart', () => {
  isTransitioning = true;
});

slidesContainer.addEventListener('transitionend', () => {
  isTransitioning = false;
});

function updateSlide() {
  if(isTransitioning) return;
  slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
  // 其余逻辑...
}