当前位置：首页 > JavaScript

js实现图片滚动效果

2026-02-28 19:08:26JavaScript

使用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">
    <img src="image3.jpg" width="200">
    <!-- 重复图片以实现无缝滚动 -->
    <img src="image1.jpg" width="200">
    <img src="image2.jpg" width="200">
    <img src="image3.jpg" width="200">
  </div>
</div>

使用JavaScript实现可控滚动

通过requestAnimationFrame或定时器动态修改元素位置，实现可暂停、可控制速度的滚动。

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

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

animate();

// 控制函数示例
function togglePause() { isPaused = !isPaused; }
function setSpeed(newSpeed) { speed = newSpeed; }

使用第三方库实现高级效果

引入Swiper.js等专业轮播库实现触摸滑动、分页导航等复杂交互。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<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 class="swiper-pagination"></div>
</div>

<script>
  new Swiper('.swiper', {
    loop: true,
    autoplay: { delay: 3000 },
    pagination: { el: '.swiper-pagination' }
  });
</script>

响应式布局处理

通过监听窗口大小变化动态调整滚动参数，确保不同设备上的显示效果。

function handleResize() {
  const containerWidth = container.offsetWidth;
  speed = containerWidth * 0.01; // 根据容器宽度调整速度
}

window.addEventListener('resize', handleResize);
handleResize(); // 初始化

性能优化建议

避免在动画过程中触发重排，使用transform和opacity等硬件加速属性。对于大量图片采用懒加载技术。

js实现图片滚动效果

// 图片懒加载示例
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

lazyImages.forEach(img => observer.observe(img));