jquery 实现表格无缝循环滚动

可以使用 jQuery 的 animate() 方法来实现表格的无缝循环滚动。具体实现步骤如下：

1. 复制表格内容，将其粘贴到表格的末尾，实现表格内容的无限循环。

2. 使用 CSS 将表格包裹在一个固定高度、隐藏溢出部分的容器中。

3. 使用 jQuery 计算表格的高度和每次滚动的距离，并使用 animate() 方法实现表格的滚动。

下面是一份示例代码：

HTML 代码：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
      </tr>
      <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
      </tr>
      <!-- 复制表格内容 -->
      <tr>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
      </tr>
      <tr>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
      </tr>
    </tbody>
  </table>
</div>

CSS 代码：

.table-container {
  height: 200px; /* 容器固定高度 */
  overflow: hidden; /* 隐藏溢出部分 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

JavaScript 代码：

$(function() {
  var tableHeight = $('table').height(); // 获取表格高度
  var scrollDistance = $('table tr').eq(1).height(); // 获取每次滚动的距离
  var scrollSpeed = 2000; // 滚动速度

  setInterval(function() {
    $('.table-container').animate({scrollTop: '+=' + scrollDistance + 'px'}, scrollSpeed, 'swing', function() {
      if ($('.table-container').scrollTop() >= tableHeight) {
        $('.table-container').scrollTop(0); // 滚动到顶部
      }
    });
  }, scrollSpeed);
});

这份代码中，我们使用了 setInterval() 方法和 animate() 方法实现了表格的无限循环滚动。其中，setInterval() 方法用于定时执行 animate() 方法，而 animate() 方法则用于实现每次滚动的动画效果。在 animate() 方法中，我们使用 scrollTop 属性来控制滚动的距离，并在滚动到表格底部时将滚动条重置到表格顶部，实现表格内容的无限循环滚动。