js实现简单轮播

实现基础轮播效果

使用HTML、CSS和JavaScript创建一个基础的自动轮播效果。HTML结构包含一个容器和多个轮播项，CSS设置样式和布局，JavaScript处理轮播逻辑。

<div class="slider-container">
  <div class="slider">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
</div>

.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

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

.slide {
  min-width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
}

.slide:nth-child(1) { background: #ff5252; }
.slide:nth-child(2) { background: #4caf50; }
.slide:nth-child(3) { background: #2196f3; }

核心JavaScript代码

实现自动轮播功能，设置定时器切换幻灯片，并在鼠标悬停时暂停轮播。

const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
let currentIndex = 0;
let interval;

function startSlider() {
  interval = setInterval(() => {
    currentIndex = (currentIndex + 1) % slides.length;
    slider.style.transform = `translateX(-${currentIndex * 100}%)`;
  }, 3000);
}

function stopSlider() {
  clearInterval(interval);
}

// 初始化轮播
startSlider();

// 鼠标悬停暂停
slider.addEventListener('mouseenter', stopSlider);
slider.addEventListener('mouseleave', startSlider);

添加导航按钮

扩展功能，添加左右导航按钮，允许用户手动控制轮播。

<button class="prev-btn">Previous</button>
<button class="next-btn">Next</button>

const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

function goToSlide(index) {
  currentIndex = (index + slides.length) % slides.length;
  slider.style.transform = `translateX(-${currentIndex * 100}%)`;
}

prevBtn.addEventListener('click', () => {
  stopSlider();
  goToSlide(currentIndex - 1);
  startSlider();
});

nextBtn.addEventListener('click', () => {
  stopSlider();
  goToSlide(currentIndex + 1);
  startSlider();
});

响应式设计调整

确保轮播在不同屏幕尺寸下正常工作，通过JavaScript动态计算幻灯片宽度。

function updateSlideWidth() {
  const containerWidth = document.querySelector('.slider-container').offsetWidth;
  slides.forEach(slide => {
    slide.style.minWidth = `${containerWidth}px`;
  });
}

window.addEventListener('resize', updateSlideWidth);
updateSlideWidth(); // 初始化时调用

添加指示器

创建幻灯片指示器，显示当前活动幻灯片并提供快速导航。

<div class="indicators"></div>

const indicatorsContainer = document.querySelector('.indicators');

function createIndicators() {
  slides.forEach((_, index) => {
    const indicator = document.createElement('div');
    indicator.classList.add('indicator');
    indicator.addEventListener('click', () => {
      stopSlider();
      goToSlide(index);
      startSlider();
    });
    indicatorsContainer.appendChild(indicator);
  });
  updateIndicators();
}

function updateIndicators() {
  const indicators = document.querySelectorAll('.indicator');
  indicators.forEach((indicator, index) => {
    indicator.classList.toggle('active', index === currentIndex);
  });
}

// 在goToSlide函数末尾添加
updateIndicators();

createIndicators();

CSS样式补充

为新增的导航按钮和指示器添加样式。

.prev-btn, .next-btn {
  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-btn { left: 10px; }
.next-btn { right: 10px; }

.indicators {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background: #333;
}