如何修改现有文字轮播JS脚本 使其支持多旋转文本区域同时生效

核心修改思路 #

• 放弃全局查询span[data-up]、span[data-show]的逻辑，以每个轮播容器.wrapper为独立处理单位，每个容器内的轮播状态互不干扰
• 定时器内遍历所有轮播容器，分别处理每个容器内部的元素状态切换

适配后完整代码 #

HTML示例（支持多区块直接新增） #

<!-- 第一个轮播区块 -->
<section class="rotating-text-section">
  <h2>
    We educate by
    <div class="wrapper">
      <span data-up>teaching.</span>
      <span data-show>showing.</span>
      <span>doing.</span>
      <span>repeating.</span>
    </div>
  </h2>
</section>

<!-- 第二个轮播区块 直接加即可 无需额外配置 -->
<section class="rotating-text-section">
  <h2>
    We learn by
    <div class="wrapper">
      <span data-up>reading.</span>
      <span data-show>practicing.</span>
      <span>thinking.</span>
      <span>communicating.</span>
    </div>
  </h2>
</section>

修改后的JS代码 #

setInterval(() => {
  // 遍历所有轮播容器 每个独立处理状态
  document.querySelectorAll('.wrapper').forEach(wrapper => {
    const up = wrapper.querySelector('span[data-up]');
    const show = wrapper.querySelector('span[data-show]');
    const down = show.nextElementSibling || wrapper.querySelector('span:first-child');

    up.removeAttribute('data-up');
    show.removeAttribute('data-show');
    show.setAttribute('data-up', '');
    down.setAttribute('data-show', '');
  })
}, 2000);

可选扩展 #

如果需要不同轮播区块设置不同的切换速度，可以给每个.wrapper添加自定义属性data-speed存储毫秒数，单独为每个容器创建定时器：

document.querySelectorAll('.wrapper').forEach(wrapper => {
  const speed = wrapper.dataset.speed ? parseInt(wrapper.dataset.speed) : 2000;
  setInterval(() => {
    const up = wrapper.querySelector('span[data-up]');
    const show = wrapper.querySelector('span[data-show]');
    const down = show.nextElementSibling || wrapper.querySelector('span:first-child');

    up.removeAttribute('data-up');
    show.removeAttribute('data-show');
    show.setAttribute('data-up', '');
    down.setAttribute('data-show', '');
  }, speed);
})

使用时只要给wrapper加属性即可：

<div class="wrapper" data-speed="3000">
  <!-- 轮播文字 -->
</div>

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