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像素
- 当滚动到内容末尾时，重置滚动位置以实现循环滚动
下面是示例代码：
// 获取容器和内容元素
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水平循环滚动的完整攻略，希望对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现的类marquee水平循环滚动 - Python技术站
微信扫一扫 
支付宝扫一扫 