如何用JavaScript实现图片持续向左循环滚动的屏保效果？

Hey there! Let's get that infinite left-scrolling screensaver working. First, let's polish up the CSS approach you started with (since it's lightweight and smooth), then I'll walk you through a JavaScript implementation if you need more control over the animation.

方案1：完善你的CSS动画实现 #

You were already on the right track with CSS animations! The key to seamless infinite scrolling is making sure the background repeats horizontally, then animating the background position to shift exactly one full width of the repeated pattern. Here's the complete code:

<!DOCTYPE html>
<html>
<head>
  <title>Image Scrolling Screensaver</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; /* Prevent scrollbars */
    }

    .animator {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/33/Jordansallotments.jpg);
      background-repeat: repeat-x; /* Repeat the image horizontally */
      background-size: auto 100%; /* Keep image height full screen, width scales proportionally */
      animation: scrollLeft 20s linear infinite; /* Slower duration for smoother screensaver feel */
    }

    @keyframes scrollLeft {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: -100% 0; /* Shift left by full width of the repeated background */
      }
    }
  </style>
</head>
<body>
  <div class="animator"></div>
</body>
</html>

关键说明： #

• background-repeat: repeat-x ensures the image tiles horizontally, so when we shift the background position, the next tile seamlessly takes over.
• background-size: auto 100% makes the image fill the screen height while maintaining its aspect ratio.
• The scrollLeft animation shifts the background from 0 0 to -100% 0 — this works because the repeated background means the position -100% is identical to 0% visually, creating the infinite loop.

方案2：JavaScript实现（适合需要自定义控制的场景） #

If you need to adjust the scroll speed dynamically, pause/resume the animation, or add other interactions, JavaScript is the way to go. We'll use requestAnimationFrame for smooth, performant scrolling:

<!DOCTYPE html>
<html>
<head>
  <title>JS Image Scrolling Screensaver</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .scroll-container {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      display: flex; /* Keep images side by side */
    }

    .scroll-img {
      height: 100%;
      width: auto; /* Maintain aspect ratio */
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <img class="scroll-img" src="https://upload.wikimedia.org/wikipedia/commons/3/33/Jordansallotments.jpg" alt="Scrolling landscape">
    <!-- Duplicate the image for seamless looping -->
    <img class="scroll-img" src="https://upload.wikimedia.org/wikipedia/commons/3/33/Jordansallotments.jpg" alt="Scrolling landscape">
  </div>

  <script>
    const scrollContainer = document.querySelector('.scroll-container');
    const scrollImg = document.querySelector('.scroll-img');
    let scrollPosition = 0;
    const scrollSpeed = 2; // Adjust this value to change scroll speed (higher = faster)

    // Wait for the image to load to get its width
    scrollImg.onload = function() {
      const imgWidth = scrollImg.offsetWidth;
      
      function animateScroll() {
        scrollPosition -= scrollSpeed;
        // Reset position when we've scrolled one full image width
        if (scrollPosition <= -imgWidth) {
          scrollPosition = 0;
        }
        // Use transform for smooth, GPU-accelerated movement
        scrollContainer.style.transform = `translateX(${scrollPosition}px)`;
        requestAnimationFrame(animateScroll);
      }

      animateScroll();
    };
  </script>
</body>
</html>

关键说明： #

• We use two identical images in a flex container so that when the first image scrolls completely off-screen, the second one is already in place, creating a seamless loop.
• requestAnimationFrame ensures the animation syncs with the browser's refresh rate for smooth scrolling (way better than setInterval).
• We reset the scroll position to 0 once we've moved exactly one full image width — this makes the loop appear infinite because the second image is identical to the first.
• Adjust the scrollSpeed variable to make the scrolling faster or slower.

内容的提问来源于stack exchange，提问作者kadina