js实现图片循环滚动

实现图片循环滚动的JavaScript方法

使用CSS动画结合JavaScript

通过CSS的@keyframes定义动画效果，JavaScript动态控制动画启停和重置。HTML结构中需要将图片横向排列在容器内。

<div class="scroll-container">
  <div class="image-track">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <!-- 更多图片 -->
  </div>
</div>

.scroll-container {
  width: 100%;
  overflow: hidden;
}
.image-track {
  display: flex;
  animation: scroll 20s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

const track = document.querySelector('.image-track');
// 克隆图片节点实现无缝循环
track.innerHTML += track.innerHTML;
// 鼠标悬停暂停动画
track.addEventListener('mouseenter', () => {
  track.style.animationPlayState = 'paused';
});
track.addEventListener('mouseleave', () => {
  track.style.animationPlayState = 'running';
});

纯JavaScript实现动态滚动

通过定时器动态修改translateX值，适合需要精确控制滚动速度的场景。

const container = document.querySelector('.scroll-container');
const track = document.querySelector('.image-track');
let position = 0;
const speed = 1; // 像素/帧

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

使用第三方库（Swiper.js）

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

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
  </div>
</div>

import Swiper from 'swiper';
new Swiper('.swiper', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
  speed: 800
});

注意事项

• 图片容器宽度应设置为所有图片总宽度，避免出现空白
• 移动端需添加touch事件支持
• 性能优化：对图片使用will-change: transform提升渲染性能
• 无限循环建议克隆首尾图片，避免出现滚动间隙