如何让幻灯片首个文本300ms后显示，其余保持4秒过渡？

问题描述 #

当前幻灯片所有内容的过渡时间为4秒，通过setInterval函数控制整体逻辑。我希望首个文本在300ms后显示，后续内容仍保持4秒过渡，避免等待4秒才启动幻灯片。

解决方案 #

核心思路是分离首次触发逻辑与后续循环逻辑：用setTimeout在300ms后激活首个文本，同时启动setInterval维持后续4秒的轮播间隔，既满足首屏快速启动的需求，又不影响后续内容的过渡节奏。

修改后的JavaScript代码如下：

// 封装轮播切换逻辑为独立函数
function slideTransition() {
  $('.blurtext span.past').removeClass('past');
  $('.blurtext span.active').addClass('past').removeClass('active');
  $('.blurtext span.past + span').addClass('active');
  if ($('.blurtext span.active').length === 0){
    $('.blurtext span:nth-child(1)').addClass('active');
  }
}

// 300ms后激活首个文本，并启动后续轮播循环
setTimeout(() => {
  $('.blurtext span:nth-child(1)').addClass('active');
  setInterval(slideTransition, 4000);
}, 300);

代码说明 #

• 将原setInterval内的逻辑抽离为slideTransition函数，提升代码复用性与可维护性。
• 通过setTimeout延迟300ms直接给第一个<span>添加active类，触发CSS过渡动画，实现首屏文本快速显示。
• 首次激活完成后立即启动setInterval，保持每4秒执行一次轮播切换，确保后续内容的过渡间隔与原逻辑一致。

HTML与CSS部分无需修改，直接替换JavaScript代码即可实现需求。

内容的提问来源于stack exchange，提问作者DigiNet Events