js实现轮播图

轮播图实现方法

基础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"></div>
</div>

CSS样式

.slider {
  position: relative;
  width: 800px;
  height: 400px;
  margin: auto;
  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%);
  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: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bbb;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background: #333;
}

JavaScript核心功能

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

// 创建指示点
slides.forEach((_, index) => {
  const dot = document.createElement('div');
  dot.classList.add('dot');
  if(index === 0) dot.classList.add('active');
  dot.addEventListener('click', () => goToSlide(index));
  dotsContainer.appendChild(dot);
});

const dots = document.querySelectorAll('.dot');

// 切换幻灯片函数
function goToSlide(index) {
  slides.forEach(slide => slide.classList.remove('active'));
  dots.forEach(dot => dot.classList.remove('active'));

  currentIndex = index;
  slides[currentIndex].classList.add('active');
  dots[currentIndex].classList.add('active');

  document.querySelector('.slides').style.transform = `translateX(-${currentIndex * 100}%)`;
}

// 下一张
nextBtn.addEventListener('click', () => {
  const nextIndex = (currentIndex + 1) % slides.length;
  goToSlide(nextIndex);
});

// 上一张
prevBtn.addEventListener('click', () => {
  const prevIndex = (currentIndex - 1 + slides.length) % slides.length;
  goToSlide(prevIndex);
});

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

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

// 鼠标离开恢复
document.querySelector('.slider').addEventListener('mouseleave', () => {
  interval = setInterval(() => {
    const nextIndex = (currentIndex + 1) % slides.length;
    goToSlide(nextIndex);
  }, 3000);
});

功能扩展建议

添加淡入淡出效果可修改CSS过渡属性：

.slides {
  position: relative;
}

.slide {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide.active {
  opacity: 1;
}

支持触摸滑动需要添加事件监听：

let touchStartX = 0;
let touchEndX = 0;

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

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

function handleSwipe() {
  if(touchEndX < touchStartX - 50) {
    const nextIndex = (currentIndex + 1) % slides.length;
    goToSlide(nextIndex);
  }
  if(touchEndX > touchStartX + 50) {
    const prevIndex = (currentIndex - 1 + slides.length) % slides.length;
    goToSlide(prevIndex);
  }
}

响应式处理

添加媒体查询调整轮播图尺寸：

@media (max-width: 768px) {
  .slider {
    width: 100%;
    height: 300px;
  }
}