滚动文字逐行高亮的核心逻辑是用递归setTimeout管理当前索引并切换li的active类，配合opacity过渡和绝对定位居中实现平滑高亮，避免setInterval堆积与布局跳动。
滚动文字逐行高亮的核心逻辑是什么
本质是控制 ul 或 ol 中每一项（li）的显示状态，配合 setInterval 定时切换当前高亮项的 class。不能靠 CSS 动画自动滚动，必须用 JS 管理“当前索引”，再通过增删 class 控制样式。常见错误是直接操作 display: none 导致布局跳动，或用 visibility: hidden 忘记保留占位，影响滚动节奏。
如何用定时器精准控制每行高亮时机
关键在避免 setInterval 堆积和索引越界。推荐用递归 setTimeout 替代循环 setInterval，更可控：
let currentIndex = 0;
const items = document.querySelectorAll('li');
function highlightNext() {
items.forEach((item, i) => {
item.classList.toggle('active', i === currentIndex);
});
currentIndex = (currentIndex + 1) % items.length;
setTimeout(highlightNext, 2000); // 每2秒切一行
}
highlightNext();
- 用
toggle('active', condition)替代手动add/remove，简洁且防重复 - 模运算
% items.length确保循环不崩 - 不用
setInterval是因为异步执行可能叠加，尤其在页面失焦后恢复时容易触发多次
高亮 class 的 CSS 写法要注意什么
显隐不能只靠 opacity 或 visibility，否则文字会重叠或留白异常。推荐组合使用：
