jquery使用animate 实现无缝轮播图

以下是使用 jQuery 的 animate() 方法实现无缝轮播图的示例代码：

HTML 代码：

<div class="slider">
  <ul>
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
    <li><img src="image4.jpg"></li>
  </ul>
</div>

CSS 代码：

.slider {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 300px;
}
.slider ul {
  position: absolute;
  left: 0;
  top: 0;
  width: 2400px;
}
.slider li {
  float: left;
  width: 600px;
  height: 300px;
}

JavaScript 代码：

$(function() {
  var sliderWidth = $('.slider').width();
  var slideCount = $('.slider ul li').length;
  var slideWidth = sliderWidth / slideCount;
  var currentPosition = 0;

  $('.slider ul').css('width', slideWidth * slideCount);

  function moveSlider() {
    currentPosition -= slideWidth;

    if (currentPosition == -sliderWidth) {
      $('.slider ul').css('left', 0);
      currentPosition = 0;
    }

    $('.slider ul').animate({
      left: currentPosition
    }, 500);
  }

  var sliderInterval = setInterval(moveSlider, 3000);

  $('.slider').hover(function() {
    clearInterval(sliderInterval);
  }, function() {
    sliderInterval = setInterval(moveSlider, 3000);
  });
});

解释：

1. 初始化一些变量：轮播图容器的宽度、轮播图中图片的数量、每张图片的宽度、当前位置。
2. 设置轮播图 ul 元素的宽度，使所有图片能够在同一行中排列。
3. 编写 moveSlider() 函数，该函数用于根据当前位置移动轮播图，并在移动到最后一张图片时重新回到第一张图片。
4. 使用 setInterval() 函数来定时调用 moveSlider() 函数，实现自动轮播。
5. 在轮播图容器上添加 hover 事件，当鼠标移入时清除轮播定时器，当鼠标移出时重新启动轮播定时器。