使用 jQuery 里的 animate()实现图片无限滚动

可以使用 jQuery 里的 animate() 方法实现图片无限滚动，具体实现方法如下：

1. HTML 代码部分：

<div class="scroll-container">
  <div class="scroll-content">
    <img src="img1.jpg" alt="Image 1">
    <img src="img2.jpg" alt="Image 2">
    <img src="img3.jpg" alt="Image 3">
    <img src="img4.jpg" alt="Image 4">
    <img src="img5.jpg" alt="Image 5">
  </div>
</div>

2. CSS 代码部分：

.scroll-container {
  width: 100%;
  overflow: hidden;
}

.scroll-content {
  width: 5000px; /* 设置足够宽度，保证所有图片可以排列在一行 */
}

.scroll-content img {
  float: left;
}

3. JavaScript 代码部分：

$(document).ready(function() {
  // 获取图片总数
  var imageCount = $('.scroll-content img').length;
  // 获取单个图片宽度
  var imageWidth = $('.scroll-content img:first').outerWidth();
  // 计算容器宽度
  var containerWidth = imageCount * imageWidth;
  // 设置容器宽度
  $('.scroll-content').css('width', containerWidth);

  // 定义滚动函数
  function scrollImages() {
    // 获取第一张图片
    var $firstImage = $('.scroll-content img:first');
    // 计算移动距离
    var distance = -imageWidth;
    // 执行动画，移动到指定位置
    $('.scroll-content').animate({
      marginLeft: distance
    }, 1000, function() {
      // 动画完成后，将第一张图片添加到最后
      $firstImage.appendTo('.scroll-content');
      // 重置 margin-left，使得容器回到原始位置
      $('.scroll-content').css('marginLeft', 0);
    });
  }

  // 设置定时器，每隔3秒执行一次滚动函数
  setInterval(scrollImages, 3000);
});

上述代码中，首先获取图片总数和单个图片宽度，计算出容器宽度，并设置容器宽度。然后定义了一个滚动函数，该函数将第一张图片移动到容器左侧，动画完成后将第一张图片添加到最后，并重置容器的 margin-left 值，使得容器回到原始位置。最后设置了一个定时器，每隔3秒执行一次滚动函数，从而实现图片的无限滚动。