当前位置：首页 > JavaScript

js实现轮播图自动手动

2026-04-05 01:53:03JavaScript

js实现轮播图自动手动

实现轮播图（自动+手动切换）

HTML 结构

<div class="slider">
  <div class="slides">
    <div class="slide active"><img src="image1.jpg" alt="Slide 1"></div>
    <div class="slide"><img src="image2.jpg" alt="Slide 2"></div>
    <div class="slide"><img src="image3.jpg" alt="Slide 3"></div>
  </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%;
}

.slide img {
  width: 100%;
  display: block;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border: none;
  background: rgba(0,0,0,0.3);
  cursor: pointer;
}

.next {
  right: 0;
}

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

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

.dot.active {
  background: #717171;
}

JavaScript 逻辑

let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
const slidesContainer = document.querySelector('.slides');
let autoSlideInterval;

function updateSlider() {
  slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;

  slides.forEach(slide => slide.classList.remove('active'));
  slides[currentIndex].classList.add('active');

  dots.forEach(dot => dot.classList.remove('active'));
  dots[currentIndex].classList.add('active');
}

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

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

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

function stopAutoSlide() {
  clearInterval(autoSlideInterval);
}

// 初始化
document.querySelector('.next').addEventListener('click', () => {
  nextSlide();
  stopAutoSlide();
  startAutoSlide();
});

document.querySelector('.prev').addEventListener('click', () => {
  prevSlide();
  stopAutoSlide();
  startAutoSlide();
});

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

// 鼠标悬停暂停自动轮播
document.querySelector('.slider').addEventListener('mouseenter', stopAutoSlide);
document.querySelector('.slider').addEventListener('mouseleave', startAutoSlide);

startAutoSlide();