js实现文字列表无缝滚动效果

实现文字列表无缝滚动效果有多种方法，其中一种常用的实现方式是使用JavaScript和CSS结合的方法。

以下是实现文字列表无缝滚动效果的具体步骤：

1. 准备HTML结构

首先，需要在HTML文件中添加一个无序列表（ul），该列表包含所有需要滚动显示的文本元素（li），例如：

<ul id="scroll-list">
  <li>这是第一条滚动文本</li>
  <li>这是第二条滚动文本</li>
  <li>这是第三条滚动文本</li>
  <li>这是第四条滚动文本</li>
  <li>这是第五条滚动文本</li>
</ul>

2. CSS样式调整

使用CSS来设置无序列表（ul）的样式，例如：

#scroll-list {
  overflow: hidden;  /* 隐藏超出部分 */
  white-space: nowrap; /* 防止文本自动换行 */
}

用CSS调整列表项（li）的布局，例如：

#scroll-list li {
  display: inline-block; /* 将所有列表项显示在同一行 */
  padding-right: 50px;  /* 每一项之间留出一定的间隔 */
}

3. JavaScript实现滚动效果

实现JavaScript函数来实现滚动效果。首先，我们需要获取ul元素到左边缘的距离（offsetLeft）并将其赋值给变量scrollDistance，以便我们能够追踪ul元素的位置，例如：

var ul = document.getElementById('scroll-list');
var scrollDistance = ul.offsetLeft;

接下来，创建一个名为scrollList的函数。在该函数中我们做两件事情：

• 将ul元素的marginLeft值每隔一定的时间递减（例如每10毫秒递减2像素）
• 当ul元素的marginLeft达到一个负值等于所有列表项的宽度之和时，将marginLeft值重置为0（实现无缝滚动）

以下是scrollList函数的代码：

function scrollList() {
  var ul = document.getElementById('scroll-list');
  var listWidth = 0;
  // 计算所有列表项的宽度之和
  for (var i = 0; i < ul.children.length; i++) {
    listWidth += ul.children[i].offsetWidth;
  }
  var marginLeft = 0;
  setInterval(function() {
    ul.style.marginLeft = marginLeft + 'px';
    marginLeft--;
    if (marginLeft < -listWidth) {
      marginLeft = scrollDistance;
    }
  }, 10);
}
scrollList();

示例

以下是以table的形式展示演示文本的效果：

代码示例：

<style>
  #scroll-table {
    width: 100%;
  }
  #scroll-table td {
    white-space: nowrap;
    padding-right: 50px;
  }
</style>
<table id="scroll-table">
  <tr>
    <td>这是第一条滚动文本</td>
    <td>这是第二条滚动文本</td>
    <td>这是第三条滚动文本</td>
    <td>这是第四条滚动文本</td>
    <td>这是第五条滚动文本</td>
  </tr>
</table>
<script>
  var table = document.getElementById('scroll-table');
  var tdWidth = 0;
  // 计算所有td的宽度之和
  for (var i = 0; i < table.rows[0].cells.length; i++) {
    tdWidth += table.rows[0].cells[i].offsetWidth;
  }
  var marginLeft = 0;
  setInterval(function() {
    table.style.marginLeft = marginLeft + 'px';
    marginLeft--;
    if (marginLeft < -tdWidth) {
      marginLeft = 0;
    }
  }, 10);
</script>

以上代码会使得table元素内的所有td元素按照逗号分隔的形式依次显示，在显示完所有td元素后又重新开始从第一个td元素开始滚动。在这个示例中，我们使用了一个table元素来展示滚动文本，同时使用了与之前相似的JavaScript逻辑实现滚动效果。与之前不同的是我们使用了同样的CSS技术来为每个td元素设置右侧的间距，以达到td元素之间的间隔视觉效果。

还有一些文本不适合用表格展示（比如带有大量换行和段落的文本），这时我们可以采用单独的块级元素作为滚动文本。以下是一个示例，它使用了p元素作为滚动文本：

代码示例：

<style>
  #scroll-paragraph {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
</style>
<div id="scroll-paragraph">
  <p>这是第一条滚动文本</p>
  <p>这是第二条滚动文本</p>
  <p>这是第三条滚动文本</p>
  <p>这是第四条滚动文本</p>
  <p>这是第五条滚动文本</p>
</div>
<script>
  var paragraph = document.getElementById('scroll-paragraph');
  var pWidth = paragraph.offsetWidth;
  var marginLeft = 0;
  setInterval(function() {
    paragraph.style.marginLeft = marginLeft + 'px';
    marginLeft--;
    if (marginLeft < -pWidth) {
      marginLeft = 0;
    }
  }, 10);
</script>

在以上示例中，我们使用了一个div元素来包装所有需要滚动的p元素。由于p元素会自动换行，所以我们需要使用CSS将div元素的白色文本空间设置为“nowrap”以防止p元素自动换行。