使jQuery旋转木马自动滑动

<div class="carousel">
  <ul class="slides">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
</div>

.carousel {
  width: 400px;
  height: 300px;
  overflow: hidden;
}

.carousel .slides {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.carousel .slides li {
  float: left;
  width: 100%;
  height: 100%;
}

.carousel .slides li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

$(document).ready(function() {
  // 设置每次滑动的时间间隔（单位：毫秒）
  var interval = 3000;
  
  // 获取旋转木马容器和滑动列表
  var carousel = $('.carousel');
  var slides = carousel.find('.slides');
  
  // 获取滑动列表中的每个项和第一个项
  var slideItems = slides.find('li');
  var firstSlide = slideItems.first();
  
  // 获取每个项的宽度和滑动列表的总宽度
  var slideWidth = slideItems.width();
  var slidesWidth = slideWidth * slideItems.length;
  
  // 将第一个项复制到滑动列表的末尾
  slides.append(firstSlide.clone());
  
  // 设置滑动列表的总宽度，使最后一项与第一项相邻
  slides.width(slidesWidth + slideWidth);
  
  // 定义滑动函数
  function slide() {
    // 计算滑动列表的当前偏移量
    var offset = slides.position().left - slideWidth;
    
    // 使用动画函数实现平滑滑动效果
    slides.animate({ left: offset }, 500, function() {
      // 判断是否滑动到最后一项，如果是则将偏移量重置为0，并将滑动列表的left属性设置为0
      if (slides.position().left <= -slidesWidth) {
        slides.css('left', 0);
      }
    });
  }
  
  // 设置定时器，每隔指定的时间间隔调用滑动函数
  var timer = setInterval(slide, interval);
  
  // 当鼠标移入旋转木马时，清除定时器暂停自动滑动
  carousel.mouseenter(function() {
    clearInterval(timer);
  });
  
  // 当鼠标移出旋转木马时，重新设置定时器恢复自动滑动
  carousel.mouseleave(function() {
    timer = setInterval(slide, interval);
  });
});