js文字左右循环滚动效果怎么实现

要实现文字的左右循环滚动效果，可以使用以下步骤：

1. 创建一个包裹文字的容器元素，并设置其宽度为容器元素的父元素宽度的倍数，这样文字就可以在容器内左右滚动。

2. 创建一个动画效果，使文字在容器内左右滚动。可以使用CSS的@keyframes规则定义动画效果，通过改变transform属性的值来实现滚动效果。

3. 在JavaScript中，使用setInterval函数来触发动画效果，设置滚动速度和滚动方向。可以在每次滚动完成后判断滚动的位置，如果滚动到容器的右边界，则将文字的位置重置到容器的左边界。

下面是一个实现文字左右循环滚动效果的示例代码：

HTML:

<div class="scroll-container">
<div class="scroll-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>

CSS:

.scroll-container {
width: 200px;
overflow: hidden;
}
.scroll-content {
white-space: nowrap;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

JavaScript:

const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');
const containerWidth = container.offsetWidth;
const contentWidth = content.offsetWidth;
let scrollPosition = 0;
setInterval(() => {
scrollPosition--;
content.style.transform = `translateX(${scrollPosition}px)`;
if (scrollPosition <= -contentWidth) {
scrollPosition = 0;
}
}, 10);

在上述示例中，将文字的滚动速度设置为10s，可以根据需要调整滚动速度。