js实现轮播图效果

使用原生JavaScript实现轮播图

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

CSS样式

.slider {
  position: relative;
  width: 800px;
  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;
  z-index: 10;
}

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

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

.dot {
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}

.dot.active {
  background: white;
}

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, i) => {
      slide.style.transform = `translateX(${100 * (i - index)}%)`;
      slide.classList.toggle('active', i === index);
    });

    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === index);
    });
  }

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

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

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

  function stopAutoSlide() {
    clearInterval(intervalId);
  }

  nextBtn.addEventListener('click', () => {
    nextSlide();
    stopAutoSlide();
    startAutoSlide();
  });

  prevBtn.addEventListener('click', () => {
    prevSlide();
    stopAutoSlide();
    startAutoSlide();
  });

  dots.forEach((dot, i) => {
    dot.addEventListener('click', () => {
      currentIndex = i;
      showSlide(currentIndex);
      stopAutoSlide();
      startAutoSlide();
    });
  });

  startAutoSlide();
});

使用Swiper.js库实现轮播图

安装Swiper

npm install swiper
# 或使用CDN
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

HTML结构

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
    <div class="swiper-slide"><img src="image3.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

JavaScript初始化

const swiper = new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

实现无限循环轮播效果

对于原生JavaScript实现，修改showSlide函数：

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.style.transform = `translateX(${100 * (i - index)}%)`;
  });

  // 处理无限循环
  if(index >= slides.length) {
    currentIndex = 0;
    setTimeout(() => {
      slides.forEach(slide => {
        slide.style.transition = 'none';
        slide.style.transform = `translateX(${-100 * currentIndex}%)`;
      });
      setTimeout(() => {
        slides.forEach(slide => {
          slide.style.transition = 'transform 0.5s ease';
        });
      }, 10);
    }, 500);
  }

  if(index < 0) {
    currentIndex = slides.length - 1;
    setTimeout(() => {
      slides.forEach(slide => {
        slide.style.transition = 'none';
        slide.style.transform = `translateX(${-100 * currentIndex}%)`;
      });
      setTimeout(() => {
        slides.forEach(slide => {
          slide.style.transition = 'transform 0.5s ease';
        });
      }, 10);
    }, 500);
  }

  dots.forEach((dot, i) => {
    dot.classList.toggle('active', i === currentIndex);
  });
}

响应式轮播图实现

添加媒体查询和JavaScript调整：

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

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

CSS媒体查询

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

  .prev, .next {
    padding: 5px;
    font-size: 12px;
  }
}