使用 jQuery 里的 animate()实现图片无限滚动 并且鼠标移入停止滚动 移出继续滚动

首先，需要在HTML中添加一个包含图片的容器，然后使用CSS设置容器的宽度和溢出隐藏属性，使其能够容纳图片并隐藏超出部分。

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <!-- 在这里添加更多图片 -->
</div>

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

接下来，使用jQuery的animate()方法实现图片的无限滚动。我们需要先获取图片容器的宽度，并将第一张图片复制一份放到最后，以便能够无缝切换。

$(document).ready(function() {
  var container = $('.image-container');
  var images = container.find('img');
  var width = images.first().width();
  var totalWidth = width * images.length;
  container.width(totalWidth);

  var speed = 3000; // 滚动速度，单位为毫秒

  function animateImages() {
    container.animate({marginLeft: -width}, speed, function() {
      container.css({marginLeft: 0});
      container.find('img').first().appendTo(container);
    });
  }

  var interval = setInterval(animateImages, speed);

  container.on('mouseenter', function() {
    clearInterval(interval);
  });

  container.on('mouseleave', function() {
    interval = setInterval(animateImages, speed);
  });
});

以上代码中，我们定义了一个animateImages()函数，用于实现图片的滚动。在函数中，我们使用animate()方法将容器向左移动一个图片的宽度，并在动画完成后将第一张图片移到最后。然后，我们使用setTimeout()函数调用animateImages()函数，从而实现图片的无限滚动。

接下来，我们定义一个interval变量，用于存储滚动定时器的ID，并将其初始化为调用animateImages()函数的结果。然后，我们在鼠标进入图片容器时清除定时器，鼠标离开时重新启动定时器，从而实现鼠标移入停止滚动，移出继续滚动的效果。