原生javascript实现无间缝滚动示例

下面我将详细讲解如何用原生JavaScript实现无间缝滚动的攻略。

步骤一：准备HTML文件结构

首先，我们需要准备一个包含滚动内容的HTML结构。示例结构可以是一组图片，如下所示：

<div class="scroll-wrapper">
  <ul class="scroll-content">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
    <li><img src="img4.jpg"></li>
    <li><img src="img5.jpg"></li>
  </ul>
</div>

步骤二：编写CSS样式

接下来，我们需要设置滚动区域的样式。我们将scroll-wrapper设置为滚动区域的容器，并将scroll-content设置为滚动内容的容器。需要注意的是，我们需要将滚动内容的宽度设置为滚动区域的N倍，其中N为滚动区域的可视区域数。

.scroll-wrapper {
  width: 640px;
  height: 320px;
  overflow: hidden;
}

.scroll-content {
  position: relative;
  left: -640px;
  width: 3200px;
}

步骤三：添加JavaScript逻辑

我们将使用setInterval()函数来实现无间缝滚动。首先，在HTML中引入JavaScript脚本：

<script src="scroll.js"></script>

然后，在scroll.js文件中添加以下代码：

var scrollElem = document.querySelector('.scroll-content');
var scrollPx = 320;
var intervalTime = 3000;
var timerId;

function scrollNext() {
  var currentLeft = parseInt(scrollElem.style.left) || 0;
  var nextLeft = currentLeft - scrollPx;
  if (nextLeft < -(scrollElem.offsetWidth - scrollPx)) {
    nextLeft = 0;
  }
  scrollElem.style.left = nextLeft + 'px';
}

timerId = setInterval(scrollNext, intervalTime);

以上代码中，我们首先获取滚动内容的元素。然后，定义一个滚动距离scrollPx，它表示每滚动一次滚动内容的距离。接着，定义一个滚动间隔时间intervalTime，它表示每隔多少毫秒执行一次滚动。定义变量timerId来存储滚动的定时器ID。

然后，我们编写scrollNext()函数来实现滚动逻辑。当前位置currentLeft默认为0，如果滚动到达滚动内容的末尾，则回到滚动内容的开头。然后，使用setInterval()函数来定时执行滚动逻辑，并存储定时器ID到timerId变量中。

示例说明一：文字滚动

假设我们现在需要在网页上滚动一组文字，则我们可以使用以下HTML结构：

<div class="scroll-wrapper">
  <ul class="scroll-content">
    <li>滚动文字1</li>
    <li>滚动文字2</li>
    <li>滚动文字3</li>
    <li>滚动文字4</li>
    <li>滚动文字5</li>
  </ul>
</div>

CSS样式与示例一致。我们只需要将HTML中的img标签改为li标签，即可支持文本滚动。

示例说明二：横向滚动

现在我们需要横向滚动一组图片。我们只需要稍微修改一下CSS样式即可：

.scroll-wrapper {
  width: 640px; /* 手动设置滚动容器的宽度 */
  height: 320px;
  overflow: hidden;
  white-space: nowrap; /* 取消文字换行 */
}

.scroll-content {
  display: inline-block; /* 让滚动内容横向排列 */
}

在HTML结构中只需要再添加一个.scroll-content容器即可：

<div class="scroll-wrapper">
  <div class="scroll-content-wrapper">
    <ul class="scroll-content">
      <li><img src="img1.jpg"></li>
      <li><img src="img2.jpg"></li>
      <li><img src="img3.jpg"></li>
      <li><img src="img4.jpg"></li>
      <li><img src="img5.jpg"></li>
    </ul>
  </div>
  <div class="scroll-content-wrapper">
    <ul class="scroll-content">
      <li><img src="img1.jpg"></li>
      <li><img src="img2.jpg"></li>
      <li><img src="img3.jpg"></li>
      <li><img src="img4.jpg"></li>
      <li><img src="img5.jpg"></li>
    </ul>
  </div>
</div>

CSS样式中，我们取消了文字换行，并设置滚动容器的宽度。在滚动内容中，我们将每个容器都设置为横向排列。在HTML结构中，我们添加了两个滚动内容容器，并将它们都包裹在一个scroll-content-wrapper容器中。这样，我们就可以同时滚动多组内容了。