js实现图片滚动效果

使用CSS动画实现图片滚动

通过CSS的@keyframes和animation属性实现无缝滚动效果。将图片容器设置为横向排列，通过动画平移位置。

<style>
  .scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .scroll-content {
    display: inline-block;
    animation: scroll 20s linear infinite;
  }
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
</style>

<div class="scroll-container">
  <div class="scroll-content">
    <img src="image1.jpg" width="200">
    <img src="image2.jpg" width="200">
    <!-- 更多图片... -->
  </div>
  <div class="scroll-content" aria-hidden="true">
    <img src="image1.jpg" width="200">
    <img src="image2.jpg" width="200">
    <!-- 重复内容实现无缝滚动 -->
  </div>
</div>

使用JavaScript定时器实现

通过setInterval定期修改容器的scrollLeft属性实现平滑滚动。需计算内容宽度和滚动距离。

const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');
let scrollPos = 0;

function animate() {
  scrollPos += 1;
  if (scrollPos >= content.scrollWidth / 2) {
    scrollPos = 0;
  }
  container.scrollLeft = scrollPos;
  requestAnimationFrame(animate);
}

animate();

使用第三方库实现

Swiper.js等现成库提供丰富的滚动效果配置：

import Swiper from 'swiper';

new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 2500,
    disableOnInteraction: false,
  },
  slidesPerView: 'auto',
});

响应式处理注意事项

动态计算图片数量与容器宽度：

function initScroll() {
  const imgWidth = 200; // 单图宽度
  const visibleImgs = Math.ceil(container.offsetWidth / imgWidth);
  content.style.width = `${imgWidth * (images.length + visibleImgs)}px`;
}
window.addEventListener('resize', initScroll);

性能优化建议

使用will-change提升渲染性能：

.scroll-content {
  will-change: transform;
}

对于大量图片采用虚拟滚动技术，只渲染可视区域内的图片元素。滚动事件建议使用requestAnimationFrame而非直接setInterval。