js 实现走马灯

实现走马灯效果

走马灯（轮播图）可以通过纯 JavaScript 实现，以下是两种常见的方法：

使用 CSS 动画和 JavaScript 控制

// HTML 结构示例
<div class="carousel">
  <div class="carousel-items">
    <div class="carousel-item">Item 1</div>
    <div class="carousel-item">Item 2</div>
    <div class="carousel-item">Item 3</div>
  </div>
</div>

.carousel {
  width: 100%;
  overflow: hidden;
}
.carousel-items {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-item {
  min-width: 100%;
}

const carousel = document.querySelector('.carousel-items');
let currentIndex = 0;
const items = document.querySelectorAll('.carousel-item');
const itemCount = items.length;

function moveToNext() {
  currentIndex = (currentIndex + 1) % itemCount;
  carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
}

// 设置自动轮播
setInterval(moveToNext, 3000);

纯 JavaScript 实现

function createCarousel(containerId, items, interval = 3000) {
  const container = document.getElementById(containerId);
  let currentIndex = 0;

  // 创建轮播元素
  const carousel = document.createElement('div');
  carousel.className = 'carousel';
  carousel.style.display = 'flex';
  carousel.style.transition = 'transform 0.5s ease';

  items.forEach(item => {
    const element = document.createElement('div');
    element.className = 'carousel-item';
    element.textContent = item;
    element.style.minWidth = '100%';
    carousel.appendChild(element);
  });

  container.appendChild(carousel);

  // 轮播函数
  function slide() {
    currentIndex = (currentIndex + 1) % items.length;
    carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

  // 启动轮播
  let timer = setInterval(slide, interval);

  // 添加暂停功能
  container.addEventListener('mouseenter', () => clearInterval(timer));
  container.addEventListener('mouseleave', () => {
    timer = setInterval(slide, interval);
  });
}

// 使用示例
createCarousel('myCarousel', ['Item 1', 'Item 2', 'Item 3']);

添加导航按钮

function addNavigation(carouselId) {
  const container = document.getElementById(carouselId);
  const carousel = container.querySelector('.carousel');
  const items = container.querySelectorAll('.carousel-item');
  let currentIndex = 0;

  // 创建导航按钮
  const prevBtn = document.createElement('button');
  prevBtn.textContent = '←';
  const nextBtn = document.createElement('button');
  nextBtn.textContent = '→';

  container.appendChild(prevBtn);
  container.appendChild(nextBtn);

  // 导航功能
  function updateCarousel() {
    carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
  }

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

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

响应式设计考虑

function makeResponsive(carouselId) {
  const container = document.getElementById(carouselId);
  const carousel = container.querySelector('.carousel');
  const items = container.querySelectorAll('.carousel-item');

  function resizeHandler() {
    const containerWidth = container.clientWidth;
    items.forEach(item => {
      item.style.width = `${containerWidth}px`;
    });
    carousel.style.width = `${containerWidth * items.length}px`;
  }

  // 初始设置
  resizeHandler();

  // 窗口大小变化时调整
  window.addEventListener('resize', resizeHandler);
}

这些方法提供了基本的走马灯功能，可以根据需求进一步扩展，如添加指示器、淡入淡出效果等。