js实现图片循环滚动

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

方法一：使用 CSS 动画结合 JavaScript 控制

通过 CSS animation 属性实现滚动效果，JavaScript 用于动态调整内容或监听事件。

<div class="scroll-container">
  <div class="scroll-content">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 复制一份图片以实现无缝循环 -->
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
  </div>
</div>

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

const scrollContent = document.querySelector('.scroll-content');
// 动态调整内容宽度
scrollContent.style.width = `${scrollContent.children.length * 100}px`;

方法二：纯 JavaScript 实现动态滚动

通过 requestAnimationFrame 或 setInterval 动态修改元素的 transform 或 left 属性。

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

function scrollImages() {
  position -= 1;
  if (position <= -content.offsetWidth / 2) {
    position = 0;
  }
  content.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(scrollImages);
}
scrollImages();

方法三：使用第三方库（如 Swiper.js）

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 class="swiper-slide"><img src="image3.jpg"></div>
  </div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

const swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
    delay: 1000,
  },
});

注意事项

• 无缝循环：需要在滚动内容末尾复制一份图片，确保过渡平滑。
• 性能优化：使用 transform 而非 left 属性，避免触发重排。
• 响应式设计：监听窗口大小变化，动态调整滚动速度或内容宽度。

扩展功能

• 悬停暂停：通过监听 mouseenter 和 mouseleave 事件暂停/恢复滚动。
• 触摸支持：添加 touchstart 和 touchend 事件处理，提升移动端体验。