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">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>

CSS样式设置

为轮播组件添加基本样式：

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

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

.slide {
  min-width: 100%;
  height: 400px;
  object-fit: cover;
}

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

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

.dots {
  text-align: center;
  margin-top: 10px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #717171;
}

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 showSlide(index) {
    slides.forEach(slide => slide.classList.remove('active'));
    dots.forEach(dot => dot.classList.remove('active'));

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

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

  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
  }

  function startAutoPlay() {
    intervalId = setInterval(nextSlide, 3000);
  }

  function stopAutoPlay() {
    clearInterval(intervalId);
  }

  nextBtn.addEventListener('click', () => {
    nextSlide();
    stopAutoPlay();
    startAutoPlay();
  });

  prevBtn.addEventListener('click', () => {
    prevSlide();
    stopAutoPlay();
    startAutoPlay();
  });

  dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      currentIndex = index;
      showSlide(currentIndex);
      stopAutoPlay();
      startAutoPlay();
    });
  });

  startAutoPlay();
});

响应式处理

添加媒体查询确保在不同设备上正常显示：

@media (max-width: 600px) {
  .slide {
    height: 300px;
  }

  button {
    padding: 5px 10px;
    font-size: 12px;
  }
}

性能优化建议

1. 预加载图片资源
2. 使用requestAnimationFrame代替setInterval
3. 添加懒加载功能
4. 实现触摸滑动支持

以上代码实现了一个完整的图片轮播组件，包含自动播放、手动切换和指示器功能，可根据实际需求进一步扩展和优化。