无缝滚动效果指的是页面中的某个元素（如图片、文字等）可以在不间断的情况下水平或垂直滚动。下面介绍使用 JavaScript 实现水平无缝滚动效果的方法。
首先，我们需要在 HTML 中创建一个容器元素，用来包含需要滚动的元素。例如：
<div id="container"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> <img src="image5.jpg"> </div>
上述代码中，我们使用了一个 div 元素作为容器，并在其中放置了五个图片元素。
接下来，我们使用 JavaScript 来实现滚动效果。具体来说，我们需要通过定时器来定时地改变容器元素的 left 属性，从而实现滚动效果。代码如下：
<script>
var container = document.getElementById('container');
var imgs = container.getElementsByTagName('img');
var imgWidth = imgs[0].offsetWidth; // 获取单个图片的宽度
var speed = 50; // 滚动速度，值越小速度越快
var timer;
// 复制图片
container.innerHTML += container.innerHTML;
// 开始滚动
function startScroll() {
timer = setInterval(scrolling, speed);
container.style.overflow = 'hidden';
}
// 滚动函数
function scrolling() {
if (container.scrollLeft % imgWidth == 0) { // 滚动完一个图片的宽度时
clearInterval(timer);
setTimeout(startScroll, 1000); // 停顿一秒钟后重新开始滚动
} else {
container.scrollLeft++;
if (container.scrollLeft >= container.offsetWidth / 2) {
container.scrollLeft = 0;
}
}
}
// 开始滚动
startScroll();
</script>
上述代码中，我们首先获取了容器元素和其中的图片元素，并计算出单个图片的宽度。然后，我们复制了一份图片元素，将其添加到容器元素的末尾，以实现无缝滚动效果。接着，我们定义了一个定时器，定时调用 scrolling 函数来改变容器元素的 left 属性，从而实现滚动。scrolling 函数中，我们首先判断当前滚动的距离是否等于一个图片的宽度，如果是，则停止定时器，并在一秒钟后重新开始滚动。如果不是，则将容器元素的 scrollLeft 属性加 1，从而实现滚动的效果。