javascript 滚动新闻js代码

以下是一个简单的用JavaScript实现滚动新闻的例子：

HTML代码：

<div id="news-container">
<ul id="news-list">
<li>这是第一条新闻</li>
<li>这是第二条新闻</li>
<li>这是第三条新闻</li>
<li>这是第四条新闻</li>
<li>这是第五条新闻</li>
</ul>
</div>

CSS代码：

#news-container {
height: 100px;
overflow: hidden;
}

#news-list {
margin: 0;
padding: 0;
list-style: none;
position: relative;
animation: scroll 10s linear infinite;
}

#news-list li {
display: block;
padding: 10px;
}

@keyframes scroll {
0% {
top: 0;
}
100% {
top: -500px;
}
}

JavaScript代码：

const newsList = document.getElementById("news-list");
const newsItems = newsList.getElementsByTagName("li");

for (let i = 0; i < newsItems.length; i++) {
const newsItem = newsItems[i];
newsItem.style.top = i * 100 + "px";
}

该代码将新闻列表的每个列表项（li元素）设置为相对定位，并使用CSS动画使其向上滚动。JavaScript代码将每个列表项的初始位置设置为其索引乘以100像素，以便它们在滚动时按顺序出现。您可以根据需要更改CSS动画和JavaScript代码以适应您的特定用例。