原生js实现如下图循环滚动效果
核心代码
<div class="scroll">
<div class="blist" id="scrollContainer">
<div class="bitem">
</div>
......
<div class="bitem">
</div>
</div>
</div>
<script>
setTimeout(() => {
let speed = 10; // 调整滚动速度,单位是毫秒
let scrollContainer = document.getElementById('scrollContainer');
let contentHeight = scrollContainer.offsetHeight;
let top = 0
scrollContainer.style.position = 'relative';
scrollContainer.style.top = top + 'px';
scrollContainer.append(scrollContainer.cloneNode(scrollContainer))
setInterval(() => {
if (top * -1 < contentHeight) top--
else top = 0
scrollContainer.style.top = top + 'px';;
}, speed);
}, 200)
</script>