js文字轮播滚动
时间: 2023-07-23 18:09:37 浏览: 40
你可以使用以下代码实现 JavaScript 文字轮播滚动:
HTML 代码:
```
<div class="slider">
<ul>
<li>第一条消息</li>
<li>第二条消息</li>
<li>第三条消息</li>
<li>第四条消息</li>
<li>第五条消息</li>
</ul>
</div>
```
CSS 代码:
```
.slider {
overflow: hidden;
}
.slider ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
animation: slider 10s infinite linear;
}
.slider li {
width: 20%;
text-align: center;
}
@keyframes slider {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
```
JavaScript 代码:
```
const slider = document.querySelector('.slider ul');
const sliderItems = document.querySelectorAll('.slider li');
const sliderWidth = sliderItems[0].offsetWidth;
let currentSlide = 1;
setInterval(() => {
slider.style.transform = `translateX(-${currentSlide * sliderWidth}px)`;
currentSlide++;
if (currentSlide === sliderItems.length) {
currentSlide = 1;
}
}, 3000);
```
这段代码会实现一个带有 5 条消息的轮播滚动,每个消息占据 20% 的宽度,每隔 3 秒钟滚动到下一条消息。你可以根据需要更改消息的数量和滚动时间。