js实现走马灯效果

实现走马灯效果的方法

使用CSS动画和JavaScript控制

通过CSS定义动画效果，JavaScript控制动画的启停和方向。以下是基础实现代码：

<div class="carousel-container">
  <div class="carousel-track">
    <div class="carousel-item">Item 1</div>
    <div class="carousel-item">Item 2</div>
    <div class="carousel-item">Item 3</div>
  </div>
</div>

.carousel-container {
  width: 300px;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

const track = document.querySelector('.carousel-track');
track.addEventListener('mouseenter', () => {
  track.style.animationPlayState = 'paused';
});
track.addEventListener('mouseleave', () => {
  track.style.animationPlayState = 'running';
});

纯JavaScript动态计算位置

通过定时器动态计算元素位置实现无缝滚动：

function startCarousel(containerId, speed = 2) {
  const container = document.getElementById(containerId);
  const items = container.children;
  let position = 0;

  // 克隆元素实现无缝衔接
  container.innerHTML += container.innerHTML;

  function animate() {
    position -= speed;
    if (position <= -container.scrollWidth / 2) {
      position = 0;
    }
    container.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(animate);
  }
  animate();
}

使用第三方库（Swiper.js）

对于复杂需求，推荐使用成熟库：

import Swiper from 'swiper';
new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  slidesPerView: 3,
  spaceBetween: 30,
});

响应式处理技巧

通过监听窗口大小调整每屏显示项目数：

function responsiveCarousel() {
  const container = document.querySelector('.carousel');
  const items = container.querySelectorAll('.item');
  const viewportWidth = window.innerWidth;

  items.forEach(item => {
    item.style.flex = `0 0 ${viewportWidth > 768 ? '33%' : '100%'}`;
  });
}
window.addEventListener('resize', responsiveCarousel);

性能优化建议

避免强制同步布局（FSL），使用transform代替left/top属性。对动态内容采用虚拟滚动技术，只渲染可视区域内元素。使用will-change: transform提示浏览器优化：

.carousel-item {
  will-change: transform;
  backface-visibility: hidden;
}