纯JavaScript实现文本淡入及切换显示效果（禁止使用jQuery）

嘿，我来帮你搞定这个纯JS的文本切换需求！完全不用jQuery，咱们用原生JavaScript结合CSS过渡来实现平滑的淡入淡出效果，既轻量又容易定制。

实现思路 #

核心逻辑是利用CSS的transition属性实现透明度的平滑变化，再通过JS定时切换文本元素的显示状态——先让当前文本淡出，再让下一个文本淡入。

步骤1：HTML结构 #

先创建一个容器来包裹所有要切换的文本项：

<div class="text-container">
  <span class="text-item active">这是初始显示的文本</span>
  <span class="text-item">切换后的第一段文本</span>
  <span class="text-item">切换后的第二段文本</span>
</div>

步骤2：CSS样式（关键是过渡效果） #

给文本项设置初始隐藏状态，并用transition定义淡入淡出的动画：

.text-container {
  position: relative;
  height: 1.5em; /* 固定高度，避免切换时容器跳动 */
  line-height: 1.5em; /* 垂直居中文本 */
}

.text-item {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.5s ease-in-out; /* 0.5秒平滑过渡 */
  pointer-events: none; /* 隐藏的文本不干扰页面交互 */
}

.text-item.active {
  opacity: 1; /* 活跃文本完全显示 */
  pointer-events: auto;
}

步骤3：JavaScript逻辑 #

编写JS代码来定时切换文本的active类，实现自动轮播：

// 获取所有文本元素
const textItems = document.querySelectorAll('.text-item');
let currentIndex = 0;

function switchText() {
  // 先让当前文本淡出
  textItems[currentIndex].classList.remove('active');
  
  // 更新索引，循环切换所有文本
  currentIndex = (currentIndex + 1) % textItems.length;
  
  // 等待当前文本完全淡出后，让下一个文本淡入
  setTimeout(() => {
    textItems[currentIndex].classList.add('active');
  }, 500); // 这个时间要和CSS中transition的时长保持一致
}

// 页面加载完成后，显示第一个文本并启动轮播
document.addEventListener('DOMContentLoaded', () => {
  textItems[currentIndex].classList.add('active');
  // 设置定时切换，比如每3.5秒切换一次（3秒显示时长 + 0.5秒过渡时长）
  setInterval(switchText, 3500);
});

自定义调整建议 #

• 调整过渡速度：修改CSS中transition的0.5s为你想要的时长，比如1s就是更慢的淡入淡出。
• 修改显示时长：调整setInterval的第二个参数，比如改成4000就是文本显示3.5秒后切换。
• 手动触发切换：如果不需要自动轮播，把setInterval去掉，给按钮绑定switchText函数即可。

内容的提问来源于stack exchange，提问作者Rita Ferreira