jQuery简易的图片无缝滚动代码

以下是一个简单的 jQuery 代码示例，可以实现图片的无缝滚动：

HTML 代码：

<div class="scroll-container">
  <div class="scroll-wrapper">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
  </div>
</div>

CSS 代码：

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

.scroll-wrapper {
  display: flex;
  animation: scroll 20s linear infinite;
}

.scroll-wrapper img {
  width: 100%;
  height: auto;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

jQuery 代码：

$(function() {
  // 获取图片数量
  var count = $('.scroll-wrapper img').length;

  // 复制第一张图片并插入到最后
  $('.scroll-wrapper img:first').clone().appendTo('.scroll-wrapper');

  // 设置总宽度
  var totalWidth = count * 100;
  $('.scroll-wrapper').css('width', totalWidth + '%');

  // 每张图片的宽度
  var itemWidth = 100 / count;
  $('.scroll-wrapper img').css('width', itemWidth + '%');
});

说明：

1. 首先，我们需要将所有图片放在一个包含 `overflow: hidden` 样式的容器中，这样才能隐藏超出容器宽度的部分。

2. 然后，使用 flexbox 布局来让所有图片排列在一行，并且设置一个动画来实现滚动效果。

3. 在 jQuery 中，我们需要获取图片数量、复制第一张图片并插入到最后、设置总宽度和每张图片的宽度等操作。

4. 最后，我们可以根据需要调整 CSS 样式和动画时间等参数。