js实现div轮播

实现基础轮播结构

HTML部分需创建一个包含轮播项的容器及导航按钮：

<div class="slider-container">
  <div class="slider-track">
    <div class="slide-item">Slide 1</div>
    <div class="slide-item">Slide 2</div>
    <div class="slide-item">Slide 3</div>
  </div>
  <button class="prev-btn">❮</button>
  <button class="next-btn">❯</button>
</div>

CSS部分设置布局与动画效果：

.slider-container {
  position: relative;
  width: 600px;
  height: 300px;
  overflow: hidden;
}
.slider-track {
  display: flex;
  transition: transform 0.5s ease;
}
.slide-item {
  min-width: 100%;
  height: 100%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }

核心JavaScript逻辑

初始化变量并实现滑动功能：

const track = document.querySelector('.slider-track');
const slides = Array.from(document.querySelectorAll('.slide-item'));
const nextBtn = document.querySelector('.next-btn');
const prevBtn = document.querySelector('.prev-btn');

let currentIndex = 0;
const slideWidth = slides[0].getBoundingClientRect().width;

const updateSlidePosition = () => {
  track.style.transform = `translateX(-${currentIndex * slideWidth}px)`;
};

nextBtn.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % slides.length;
  updateSlidePosition();
});

prevBtn.addEventListener('click', () => {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  updateSlidePosition();
});

自动轮播功能

添加定时自动切换功能：

let autoSlideInterval;

const startAutoSlide = (interval = 3000) => {
  autoSlideInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % slides.length;
    updateSlidePosition();
  }, interval);
};

const stopAutoSlide = () => {
  clearInterval(autoSlideInterval);
};

// 鼠标悬停时暂停轮播
track.parentElement.addEventListener('mouseenter', stopAutoSlide);
track.parentElement.addEventListener('mouseleave', () => startAutoSlide());

// 初始化自动轮播
startAutoSlide();

无限循环优化

克隆首尾元素实现无缝循环：

const setupInfiniteSlide = () => {
  const firstClone = slides[0].cloneNode(true);
  const lastClone = slides[slides.length - 1].cloneNode(true);

  track.appendChild(firstClone);
  track.insertBefore(lastClone, slides[0]);

  track.style.transform = `translateX(-${slideWidth}px)`;
};

setupInfiniteSlide();

// 修改切换逻辑处理克隆节点
nextBtn.addEventListener('click', () => {
  if (currentIndex >= slides.length - 1) return;
  currentIndex++;
  updateSlidePosition();
});

track.addEventListener('transitionend', () => {
  if (slides[currentIndex].classList.contains('clone')) {
    track.style.transition = 'none';
    currentIndex = currentIndex === 0 ? slides.length - 2 : 1;
    updateSlidePosition();
    setTimeout(() => track.style.transition = 'transform 0.5s ease');
  }
});