js 滚动播放新闻

<div id="news-container">
  <div class="news-item">新闻1</div>
  <div class="news-item">新闻2</div>
  <div class="news-item">新闻3</div>
  <!-- 更多新闻项 -->
</div>

#news-container {
  height: 50px; /* 容器高度 */
  overflow: hidden; /* 隐藏溢出内容 */
  position: relative;
}

.news-item {
  position: absolute;
  width: 100%;
  height: 50px; /* 单条新闻高度 */
  line-height: 50px; /* 垂直居中 */
  transition: top 1s; /* 过渡效果 */
}

const newsContainer = document.getElementById('news-container');
const newsItems = document.querySelectorAll('.news-item');
let currentIndex = 0;

function scrollNews() {
  // 移除当前新闻的top属性
  newsItems[currentIndex].style.top = '-50px';
  
  // 更新索引
  currentIndex = (currentIndex + 1) % newsItems.length;
  
  // 设置下一条新闻的top属性
  newsItems[currentIndex].style.top = '0px';
}

// 初始化第一条新闻的位置
newsItems[currentIndex].style.top = '0px';

// 设置定时器，每隔一段时间滚动一次新闻
setInterval(scrollNews, 3000); // 每隔3秒滚动一次