当前位置：首页 > JavaScript

js实现轮换图

2026-02-03 04:38:53JavaScript

实现轮换图的基本思路

轮换图（轮播图）通常通过定时切换图片或内容实现动态展示效果。核心逻辑包括自动轮播、手动切换（如点击按钮）以及过渡动画。

HTML结构

构建基础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 class="dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS样式

添加基础样式实现视觉布局：

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

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

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

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

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

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

.dot {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: #bbb;
  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('.prev');
  const nextBtn = document.querySelector('.next');
  let currentIndex = 0;
  let intervalId;

  // 切换到指定索引的幻灯片
  function goToSlide(index) {
    slides.forEach((slide, i) => {
      slide.style.transform = `translateX(${100 * (i - index)}%)`;
      slide.classList.toggle('active', i === index);
    });
    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === index);
    });
    currentIndex = index;
  }

  // 自动轮播
  function startAutoPlay() {
    intervalId = setInterval(() => {
      const nextIndex = (currentIndex + 1) % slides.length;
      goToSlide(nextIndex);
    }, 3000);
  }

  // 初始化
  goToSlide(0);
  startAutoPlay();

  // 手动控制
  prevBtn.addEventListener('click', () => {
    clearInterval(intervalId);
    const prevIndex = (currentIndex - 1 + slides.length) % slides.length;
    goToSlide(prevIndex);
    startAutoPlay();
  });

  nextBtn.addEventListener('click', () => {
    clearInterval(intervalId);
    const nextIndex = (currentIndex + 1) % slides.length;
    goToSlide(nextIndex);
    startAutoPlay();
  });

  // 点击指示点切换
  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      clearInterval(intervalId);
      goToSlide(index);
      startAutoPlay();
    });
  });
});

进阶优化

添加触摸事件支持移动端滑动操作：

js实现轮换图

const slider = document.querySelector('.slider');
let startX, moveX;

slider.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
  clearInterval(intervalId);
});

slider.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
  const diffX = startX - moveX;
  slides.forEach(slide => {
    slide.style.transition = 'none';
    slide.style.transform = `translateX(calc(${100 * (slide.dataset.index - currentIndex)}% - ${diffX}px))`;
  });
});

slider.addEventListener('touchend', () => {
  const threshold = 50;
  const diffX = startX - moveX;

  if (diffX > threshold && currentIndex < slides.length - 1) {
    goToSlide(currentIndex + 1);
  } else if (diffX < -threshold && currentIndex > 0) {
    goToSlide(currentIndex - 1);
  } else {
    goToSlide(currentIndex);
  }

  slides.forEach(slide => {
    slide.style.transition = 'transform 0.5s ease';
  });

  startAutoPlay();
});