js文字左右循環滾動效果怎么實現

要實現文字的左右循環滾動效果，可以使用以下步驟：

1. 創建一個包裹文字的容器元素，并設置其寬度為容器元素的父元素寬度的倍數，這樣文字就可以在容器內左右滾動。

2. 創建一個動畫效果，使文字在容器內左右滾動?？梢允褂肅SS的@keyframes規則定義動畫效果，通過改變transform屬性的值來實現滾動效果。

3. 在JavaScript中，使用setInterval函數來觸發動畫效果，設置滾動速度和滾動方向?？梢栽诿看螡L動完成后判斷滾動的位置，如果滾動到容器的右邊界，則將文字的位置重置到容器的左邊界。

下面是一個實現文字左右循環滾動效果的示例代碼：

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，可以根據需要調整滾動速度。