JS联动动画需求：文本每4秒切换，对应图片组每2秒切换

需求回顾 #

• 文本每4秒切换一次，图片每2秒切换一次
• 前两张图片（image1、image2）对应第一个文本（String1），后两张（image3、image4）对应第二个文本（String2）
• 显示String1的4秒内切换完其对应的两张图片；切换到String2后，同步切换其对应的两张图片，循环执行

原代码问题 #

原代码使用两个独立定时器分别处理文本和图片切换，无法保证图片组与当前显示文本的对应关系，会出现文本与不匹配的图片同时显示的情况。

修改后的解决方案 #

通过单定时器协调文本与图片组的切换逻辑，确保文本和对应图片组同步循环：

<script>
// 文本数组
const text = ["String1", "String2"];
// 按文本分组的图片数组，每组对应一个文本的图片集合
const imageGroups = [
  ["image1.jpg", "image2.jpg"],
  ["image3.jpg", "image4.jpg"]
];

let textIndex = 0; // 当前显示的文本索引
let imgIndex = 0; // 当前文本组内的图片索引

const elem = document.getElementById("animated-text");
const elembg = document.getElementById("animated-background");

// 初始化显示第一个文本和对应组的第一张图片
elem.innerHTML = text[textIndex];
elembg.style.backgroundImage = `url('${imageGroups[textIndex][imgIndex]}')`;

// 每2秒执行一次切换逻辑，同时处理图片和文本的同步
setInterval(() => {
  // 切换当前文本组的下一张图片
  imgIndex++;
  if (imgIndex >= imageGroups[textIndex].length) {
    // 当前组图片切换完毕，切换到下一个文本
    textIndex++;
    // 文本循环重置
    if (textIndex >= text.length) textIndex = 0;
    // 重置当前文本组的图片索引
    imgIndex = 0;
    // 更新显示的文本
    elem.innerHTML = text[textIndex];
  }
  // 更新背景图片
  elembg.style.backgroundImage = `url('${imageGroups[textIndex][imgIndex]}')`;
}, 2000);
</script>

关键逻辑说明 #

• 图片分组：将图片按文本对应关系拆分为两组，确保每个文本只切换自己对应的图片资源
• 单定时器控制：用2秒的定时器统一处理切换，避免多定时器不同步的问题
• 状态跟踪：通过textIndex和imgIndex分别跟踪当前文本位置和组内图片位置
• 同步切换：每次切换图片后，检查是否已完成当前组的所有图片切换（即4秒周期到），此时再切换文本并重置图片索引，实现文本与对应图片组的同步循环

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