js实现图片滚动效果

使用CSS动画实现图片滚动

通过CSS的@keyframes和transform属性实现水平或垂直滚动效果。将多张图片拼接为长图，通过动画移动位置。

<style>
  .scroll-container {
    width: 300px;
    height: 200px;
    overflow: hidden;
  }
  .scroll-content {
    display: flex;
    animation: scroll 10s 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" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
  </div>
</div>

使用JavaScript定时器实现

通过setInterval定期修改元素的scrollLeft或scrollTop属性实现平滑滚动。适合需要精确控制滚动行为的场景。

const container = document.querySelector('.scroll-container');
let scrollAmount = 0;
const scrollSpeed = 1;

function autoScroll() {
  scrollAmount += scrollSpeed;
  container.scrollLeft = scrollAmount;

  if(scrollAmount >= container.scrollWidth - container.clientWidth) {
    scrollAmount = 0;
  }
}

setInterval(autoScroll, 20);

使用requestAnimationFrame优化性能

相比setInterval，requestAnimationFrame能提供更流畅的动画效果，自动匹配浏览器刷新率。

function smoothScroll() {
  const container = document.getElementById('scroller');
  container.scrollLeft += 1;

  if(container.scrollLeft >= container.scrollWidth - container.clientWidth) {
    container.scrollLeft = 0;
  }

  requestAnimationFrame(smoothScroll);
}

smoothScroll();

实现无缝循环滚动

通过克隆首尾图片实现视觉上的无缝衔接。当滚动到克隆元素时立即跳转回原始元素。

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

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

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

scrollLoop();

响应式滚动速度控制

根据容器宽度动态计算滚动速度，适配不同屏幕尺寸。

function adaptiveScroll() {
  const container = document.querySelector('.scroll-container');
  const speed = container.clientWidth * 0.02;

  container.scrollLeft += speed;

  if(container.scrollLeft >= container.scrollWidth - container.clientWidth) {
    container.scrollLeft = 0;
  }

  requestAnimationFrame(adaptiveScroll);
}

window.addEventListener('resize', adaptiveScroll);
adaptiveScroll();

触摸设备支持

添加触摸事件处理，使滚动效果在移动设备上也能正常工作。

const container = document.querySelector('.scroll-container');
let isDragging = false;
let startX, scrollLeft;

container.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.pageX - container.offsetLeft;
  scrollLeft = container.scrollLeft;
});

container.addEventListener('mouseleave', () => {
  isDragging = false;
});

container.addEventListener('mouseup', () => {
  isDragging = false;
});

container.addEventListener('mousemove', (e) => {
  if(!isDragging) return;
  e.preventDefault();
  const x = e.pageX - container.offsetLeft;
  const walk = (x - startX) * 2;
  container.scrollLeft = scrollLeft - walk;
});

// 触摸事件处理
container.addEventListener('touchstart', (e) => {
  isDragging = true;
  startX = e.touches[0].pageX - container.offsetLeft;
  scrollLeft = container.scrollLeft;
});

container.addEventListener('touchend', () => {
  isDragging = false;
});

container.addEventListener('touchmove', (e) => {
  if(!isDragging) return;
  const x = e.touches[0].pageX - container.offsetLeft;
  const walk = (x - startX) * 2;
  container.scrollLeft = scrollLeft - walk;
});