js实现的类marquee水平循环滚动

JS实现的类marquee水平循环滚动，是指在一个容器内部以水平方向不间断滚动一段文字或图片等内容，类似于HTML中的标签效果。以下为完整的攻略：

JS实现的类marquee水平循环滚动，是指在一个容器内部以水平方向不间断滚动一段文字或图片等内容，类似于HTML中的标签效果。以下为完整的攻略：

步骤1：HTML结构

首先，在HTML中建立一个容器，例如：

<div id="scroll-container">
  <span>这是一段滚动文字</span>
</div>

步骤2：CSS样式

为了让容器能够水平滚动，需要设置容器的宽度，并将内部内容设置为行内块元素。还需要将容器设置为溢出隐藏，使内容在容器内部滚动。例如：

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

#scroll-container span {
  display: inline-block;
}

步骤3：JS功能实现

接下来，需要用JS实现滚动功能。具体实现步骤如下：

1. 获取容器和内容元素
2. 获取容器宽度
3. 复制一份内容元素，并将其插入到容器末尾，形成一个连续的内容序列
4. 定时器实现滚动功能，步长可以自定义，默认为1像素
5. 当滚动到内容末尾时，重置滚动位置以实现循环滚动

下面是示例代码：

// 获取容器和内容元素
var container = document.getElementById('scroll-container');
var content = container.getElementsByTagName('span')[0];

// 获取容器宽度
var containerWidth = container.offsetWidth;

// 复制一份内容元素
var newContent = content.cloneNode(true);
// 将新内容插入到容器末尾
container.appendChild(newContent);

// 每隔10毫秒向右移动1个像素的滚动效果
var scrollStep = 1;
setInterval(function() {
  var left = container.scrollLeft + scrollStep;
  // 判断是否到达右侧边界
  if (left >= newContent.offsetLeft) {
    left -= newContent.offsetWidth;
  }
  // 滚动到指定位置
  container.scrollLeft = left;
}, 10);

示例1：滚动图片

这是一段滚动图片的示例代码，整个滚动效果和滚动文字类似，只需要将内部的元素改为图片即可。

<div id="scroll-container">
  <img src="image1.jpg">
</div>

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

#scroll-container img {
  display: inline-block;
}

// 获取容器和内容元素
var container = document.getElementById('scroll-container');
var content = container.getElementsByTagName('img')[0];

// 获取容器宽度
var containerWidth = container.offsetWidth;

// 复制一份内容元素
var newContent = content.cloneNode(true);
// 将新内容插入到容器末尾
container.appendChild(newContent);

// 每隔10毫秒向右移动1个像素的滚动效果
var scrollStep = 1;
setInterval(function() {
  var left = container.scrollLeft + scrollStep;
  // 判断是否到达右侧边界
  if (left >= newContent.offsetLeft) {
    left -= newContent.offsetWidth;
  }
  // 滚动到指定位置
  container.scrollLeft = left;
}, 10);

示例2：循环滚动多个元素

这是一个循环滚动多个元素的示例代码，在此示例中，需要将容器宽度设置为每个元素的宽度之和，以便让每个元素顺序循环滚动。

<div id="scroll-container">
  <span>这是第一个元素</span>
  <span>这是第二个元素</span>
  <span>这是第三个元素</span>
</div>

#scroll-container {
  width: 300px; /* 每个元素的宽度为100px，共3个元素，因此宽度为300px */
  overflow: hidden;
}

#scroll-container span {
  display: inline-block;
  width: 100px;
}

// 获取容器和内容元素
var container = document.getElementById('scroll-container');
var contents = container.getElementsByTagName('span');

// 获取容器宽度
var containerWidth = container.offsetWidth;

// 复制一份所有内容元素
for (var i = 0; i < contents.length; i++) {
  var newContent = contents[i].cloneNode(true);
  container.appendChild(newContent);
}

// 每隔10毫秒向右移动1个像素的滚动效果
var scrollStep = 1;
setInterval(function() {
  var left = container.scrollLeft + scrollStep;
  // 判断是否到达右侧边界
  if (left >= containerWidth) {
    left -= containerWidth;
  }
  // 滚动到指定位置
  container.scrollLeft = left;
}, 10);

以上就是实现JS类marquee水平循环滚动的完整攻略，希望对你有所帮助。