js实现图片滚动

图片滚动的实现方法

使用CSS动画实现

通过CSS的animation和@keyframes可以实现简单的图片滚动效果。这种方法适合静态图片的无缝循环滚动。

<style>
  .scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .scroll-content {
    display: inline-block;
    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">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>
</div>

使用JavaScript定时器

通过JavaScript的setInterval函数可以更灵活地控制图片滚动，适合需要交互的场景。

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)`;
}

setInterval(scrollImages, 20);

使用requestAnimationFrame

对于更流畅的动画效果，可以使用requestAnimationFrame替代setInterval。

let animationId;
let position = 0;

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

// 启动动画
animate();

// 停止动画
function stopAnimation() {
  cancelAnimationFrame(animationId);
}

实现无限循环滚动

为了无缝循环，需要复制一份图片内容并调整滚动逻辑。

const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');
// 克隆内容以实现无缝滚动
content.innerHTML += content.innerHTML;
let position = 0;

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

scrollImages();

添加交互控制

可以为滚动添加暂停、继续等交互功能。

let isScrolling = true;
let animationId;

function toggleScroll() {
  isScrolling = !isScrolling;
  if (isScrolling) {
    scrollImages();
  } else {
    cancelAnimationFrame(animationId);
  }
}

// 点击容器暂停/继续
container.addEventListener('click', toggleScroll);

响应式调整

在窗口大小变化时，需要重新计算滚动参数。

function resetScroll() {
  position = 0;
  content.style.transform = `translateX(${position}px)`;
}

window.addEventListener('resize', resetScroll);

使用第三方库

对于更复杂的需求，可以考虑使用专门的处理库：

• Swiper.js
• Glide.js
• Flickity

这些库提供了丰富的配置选项和响应式支持，可以快速实现各种滑动效果。