新闻滚动js

<div class="news-ticker">
    <ul>
        <li>新闻1：这是第一条新闻内容。</li>
        <li>新闻2：这是第二条新闻内容。</li>
        <li>新闻3：这是第三条新闻内容。</li>
    </ul>
</div>

.news-ticker {
    width: 100%;
    overflow: hidden;
    background-color: #f1f1f1;
    padding: 10px 0;
}

.news-ticker ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    animation: scroll 15s linear infinite;
}

.news-ticker li {
    padding: 5px;
    white-space: nowrap;
}

@keyframes scroll {
    0% { transform: translateY(100%); }
    5% { transform: translateY(0); }
    95% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

document.addEventListener("DOMContentLoaded", function() {
    const ticker = document.querySelector('.news-ticker ul');
    const newsItems = ticker.querySelectorAll('li');
    let index = 0;

    function scrollNews() {
        ticker.style.animationPlayState = 'paused';
        ticker.innerHTML = '';
        for (let i = index; i < newsItems.length + index; i++) {
            ticker.appendChild(newsItems[i % newsItems.length]);
        }
        index++;
        ticker.style.animationPlayState = 'running';
    }

    setInterval(scrollNews, 15000); // 每15秒滚动一次
});