DIV+CSS+JS不间断横向滚动实现代码

DIV+CSS+JS不间断横向滚动实现代码的攻略分为以下几个步骤：

HTML布局

首先需要使用div标签创建一个包含所有滚动内容的容器，并设置样式overflow: hidden;，让容器内容不可见。

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 滚动内容 -->
  </div>
</div>

其中，.scroll-container容器使用overflow: hidden;样式隐藏滚动内容的溢出部分，.scroll-content则是包含实际的滚动内容的容器。

CSS样式

现在，需要在.scroll-content容器中设置一些CSS样式，以使其能够横向滚动。首先需要将所有滚动内容依次排列在一行上，同时设置宽度为所有内容的宽度之和。然后再使用display: inline-block;样式将容器内容变成一行，即使内容超出容器宽度，也不会自动折行。最后，使用animation样式实现滚动效果。

.scroll-content {
  white-space: nowrap; /* 横向不自动换行 */
  width: 8000px; /* 所有内容宽度之和 */
  display: inline-block; /* 变成一行 */
  animation: scroll 60s linear infinite; /* 滚动效果 */
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-8000px); } /* 容器宽度 */
}

其中，animation样式用于设置动画效果，scroll则是动画名称，在@keyframes语句中进行定义。keyframes中设置了动画启始和结束时的CSS属性值，使用transform: translateX()实现横向移动效果。

JS实现

最后，需要使用JS获取.scroll-content容器的宽度，并将其赋值给width属性，实现在任何情况下都能自适应滚动内容容器的宽度。

window.onload = function() {
  var contentWidth = document.querySelector('.scroll-content').offsetWidth;
  document.styleSheets[0].addRule('.scroll-content', 'width: ' + contentWidth + 'px');
}

在JS代码中，使用了querySelector方法来获取容器宽度，添加了offsetWidth属性，可以获取元素实际渲染的宽度，而不仅仅是CSS宽度。然后将宽度值生成一个动态CSS规则，实现了滚动容器自适应宽度。

示例说明

下面，提供两个示例说明：

示例一

实现一个基本的横向滚动效果，滚动内容为一组较长的文本。

<div class="scroll-container">
  <div class="scroll-content">
    <p class="scroll-item">这是一段很长很长的文本，需要使用滚动展示，不然内容会超出容器范围</p>
    <p class="scroll-item">这是一段很长很长的文本，需要使用滚动展示，不然内容会超出容器范围</p>
    <p class="scroll-item">这是一段很长很长的文本，需要使用滚动展示，不然内容会超出容器范围</p>
  </div>
</div>

.scroll-content {
  white-space: nowrap; /* 横向不自动换行 */
  width: 8000px; /* 所有内容宽度之和 */
  display: inline-block; /* 变成一行 */
  animation: scroll 60s linear infinite; /* 滚动效果 */
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-8000px); } /* 容器宽度 */
}

window.onload = function() {
  var contentWidth = document.querySelector('.scroll-content').offsetWidth;
  document.styleSheets[0].addRule('.scroll-content', 'width: ' + contentWidth + 'px');
}

示例二

实现一个无限滚动的图片轮播效果，所有图片的宽度一致。

<div class="scroll-container">
  <div class="scroll-content">
    <img src="img1.jpg" alt="图片一" class="scroll-item"> 
    <img src="img2.jpg" alt="图片二" class="scroll-item"> 
    <img src="img3.jpg" alt="图片三" class="scroll-item"> 
    <img src="img4.jpg" alt="图片四" class="scroll-item"> 
    <img src="img5.jpg" alt="图片五" class="scroll-item"> 
  </div>
</div>

.scroll-content {
  white-space: nowrap; /* 横向不自动换行 */
  width: 5000px; /* 所有内容宽度之和 */
  display: inline-block; /* 变成一行 */
  animation: scroll 10s linear infinite; /* 滚动效果 */
}

.slide { /* 图片宽度和容器宽度一致 */
  width: 400px;
  height: 300px;
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-2000px); }
}

window.onload = function() {
  var contentWidth = document.querySelector('.scroll-content').offsetWidth;
  var itemWidth = document.querySelector('.scroll-content > img').offsetWidth;
  var numItems = contentWidth / itemWidth;

  // 将所有图片复制一份，用来实现无缝滚动效果
  for (var i = 0; i < numItems; i++) {
    var itemClone = document.querySelector('.scroll-content > img').cloneNode(true);
    document.querySelector('.scroll-content').appendChild(itemClone);
  }
  // 调整总宽度
  document.styleSheets[0].addRule('.scroll-content', 'width: ' + (contentWidth * 2) + 'px');
}

在这个示例中，需要使用JS实现图片无限滚动的效果。因此，首先需要通过JS代码复制所有的图片，将其拼接在原有图片后面，生成一份完整的图片列表。然后，使用JS代码计算所需宽度并调整容器宽度，以实现无限滚动效果。