js原生代码实现 轮播

实现轮播图的基本结构

轮播图通常由HTML、CSS和JavaScript三部分组成。HTML负责结构，CSS负责样式，JavaScript负责交互逻辑。

<div class="slider">
  <div class="slider-container">
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  overflow: hidden;
}

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

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

.slide:nth-child(1) { background: red; }
.slide:nth-child(2) { background: green; }
.slide:nth-child(3) { background: blue; }

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

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

实现轮播逻辑

JavaScript部分需要处理轮播的核心逻辑，包括滑动动画和按钮控制。

document.addEventListener('DOMContentLoaded', function() {
  const slider = document.querySelector('.slider');
  const sliderContainer = document.querySelector('.slider-container');
  const slides = document.querySelectorAll('.slide');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');

  let currentIndex = 0;
  const slideCount = slides.length;

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

  nextBtn.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % slideCount;
    updateSlider();
  });

  prevBtn.addEventListener('click', function() {
    currentIndex = (currentIndex - 1 + slideCount) % slideCount;
    updateSlider();
  });
});

添加自动轮播功能

为了增强用户体验，可以添加自动轮播功能，定时切换到下一张幻灯片。

let autoSlideInterval;

function startAutoSlide() {
  autoSlideInterval = setInterval(() => {
    currentIndex = (currentIndex + 1) % slideCount;
    updateSlider();
  }, 3000);
}

function stopAutoSlide() {
  clearInterval(autoSlideInterval);
}

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

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

添加指示器

指示器可以帮助用户了解当前显示的幻灯片位置。

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

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

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

.indicator.active {
  background: white;
}

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

// 创建指示器
function createIndicators() {
  for (let i = 0; i < slideCount; i++) {
    const indicator = document.createElement('div');
    indicator.classList.add('indicator');
    if (i === currentIndex) indicator.classList.add('active');
    indicator.addEventListener('click', () => {
      currentIndex = i;
      updateSlider();
      updateIndicators();
    });
    indicatorsContainer.appendChild(indicator);
  }
}

// 更新指示器状态
function updateIndicators() {
  const indicators = document.querySelectorAll('.indicator');
  indicators.forEach((indicator, index) => {
    if (index === currentIndex) {
      indicator.classList.add('active');
    } else {
      indicator.classList.remove('active');
    }
  });
}

// 在updateSlider中调用updateIndicators
function updateSlider() {
  sliderContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
  updateIndicators();
}

// 初始化时创建指示器
createIndicators();

添加过渡效果

为了提升用户体验，可以添加滑动过渡效果，使轮播更加平滑。

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

响应式设计

为了使轮播图在不同设备上都能正常显示，可以添加响应式设计。

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

  .slide {
    height: 300px;
  }
}