以下是一个使用纯JavaScript实现的简单无缝滚动效果的示例。这个例子是横向滚动的，但你可以通过修改CSS和JavaScript中的某些部分来轻松实现纵向滚动。
HTML:
<div id="scrollContainer"><div id="scrollContent"><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"><img src="image3.jpg" alt="Image 3"><!-- 重复内容以实现无缝滚动 --><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"><img src="image3.jpg" alt="Image 3"></div>
</div>
CSS:
#scrollContainer {width: 300px; /* 滚动容器的宽度 */overflow: hidden; /* 隐藏超出容器的内容 */position: relative; /* 相对定位 */
}#scrollContent {width: 600px; /* 内容宽度应为容器宽度的两倍（或更多，取决于内容的重复次数） */position: absolute; /* 绝对定位 */left: 0; /* 初始位置 */animation: scroll 5s linear infinite; /* 应用动画 */
}#scrollContent img {width: 100px; /* 图片宽度 */float: left; /* 使图片水平排列 */
}/* 定义动画 */
@keyframes scroll {0% { left: 0; }50% { left: -300px; } /* 移动到容器的宽度 */100% { left: 0; } /* 重置位置以实现无缝滚动 */
}
注意：在CSS中，我们使用了@keyframes来定义一个名为scroll的动画。这个动画将内容从左向右移动，然后在到达容器的宽度时重置其位置，从而实现无缝滚动。对于纵向滚动，你需要修改left属性为top，并相应地调整容器和内容的高度以及图片的排列方式。
然而，如果你想要一个更灵活的解决方案，或者想要通过JavaScript来控制滚动的速度和方向，你可以使用以下JavaScript代码来代替CSS中的动画部分：
JavaScript:
var scrollContainer = document.getElementById('scrollContent');
var scrollSpeed = 2; // 滚动速度（像素/毫秒）
var scrollDirection = -1; // 滚动方向（-1 为向左，1 为向右）
var scrollLeft = 0; // 初始滚动位置
var contentWidth = scrollContainer.offsetWidth / 2; // 内容的一半宽度（用于无缝滚动）// 使用 setInterval 来定期更新滚动位置
setInterval(function() {scrollLeft += scrollSpeed * scrollDirection;if (scrollLeft < -contentWidth) { // 当滚动到内容的一半宽度时，重置位置以实现无缝滚动scrollLeft = 0;} else if (scrollLeft > 0) { // 当滚动到初始位置时，也可以重置（可选）scrollLeft = -contentWidth;}scrollContainer.style.left = scrollLeft + 'px'; // 更新滚动位置
}, 10); // 每10毫秒更新一次（可以根据需要调整）
在这个JavaScript示例中，我们使用setInterval来定期更新滚动位置，从而实现无缝滚动。你可以通过修改scrollSpeed和scrollDirection变量来控制滚动的速度和方向。
