js文字上下轮播

<div class="scroll-container">
 <div class="scroll-content" id="scrollContent">
   <p>第一条信息</p>
   <p>第二条信息</p>
   <p>第三条信息</p>
 </div>
</div>

.scroll-container {
 height: 30px; /* 设置容器高度 */
 overflow: hidden; /* 隐藏溢出内容 */
 position: relative;
}

.scroll-content {
 position: absolute;
 top: 0;
 left: 0;
 transition: top 0.5s ease-in-out; /* 设置动画效果 */
}

const scrollContent = document.getElementById('scrollContent');
const paragraphs = scrollContent.getElementsByTagName('p');
let currentIndex = 0;

function scrollText() {
 // 隐藏当前显示的段落
 paragraphs[currentIndex].style.top = '-30px';
 
 // 更新索引
 currentIndex = (currentIndex + 1) % paragraphs.length;
 
 // 显示下一个段落
 paragraphs[currentIndex].style.top = '0';
}

// 设置定时器，每隔一段时间执行滚动函数
setInterval(scrollText, 2000); // 2秒滚动一次