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>

CSS样式

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  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;
  cursor: pointer;
}

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

JavaScript实现

const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const slidesContainer = document.querySelector('.slides');

let currentIndex = 0;

function updateSlider() {
  slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
  slides.forEach((slide, index) => {
    slide.classList.toggle('active', index === currentIndex);
  });
}

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

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

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

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

document.querySelector('.slider').addEventListener('mouseleave', () => {
  interval = setInterval(() => {
    currentIndex = (currentIndex + 1) % slides.length;
    updateSlider();
  }, 3000);
});

实现要点说明

核心逻辑 通过修改translateX属性移动幻灯片容器，利用CSS过渡效果实现平滑动画。当前显示索引存储在currentIndex变量中。

边界处理 使用模运算(%)确保索引在有效范围内循环，当到达最后一张时返回第一张，到达第一张时跳到最后一张。

交互增强 添加自动轮播功能，通过setInterval定时切换。当用户鼠标悬停时暂停轮播，离开后恢复。

扩展建议

• 添加指示器小圆点
• 支持触摸滑动（移动端）
• 添加淡入淡出过渡效果
• 实现无限循环（克隆首尾元素）

这种实现方式不依赖任何第三方库，适合学习轮播图的基本原理。对于生产环境，可以考虑使用成熟的轮播库如Swiper.js以获得更丰富的功能和更好的兼容性。