如何为JavaScript图片切换函数添加另一张图片并同步切换？

基础修改方式 #

先给新增的第二张图片设置唯一ID（比如secondCarImg），再按以下步骤修改代码：

1. 获取第二张图片的DOM元素
2. 在按钮点击事件中，同时更新两张图片的src属性

修改后的完整代码：

const myBtn = document.getElementById("darktheme");
// 获取两张需要切换的图片元素
const imgFerrari = document.getElementById("ferrarijs");
const imgSecond = document.getElementById("secondCarImg"); // 替换为你新增图片的实际ID

let counter = 0;

myBtn.addEventListener("click", function() {
  if (counter % 2 === 0) {
    // 切换到第一组图片
    imgFerrari.setAttribute("src", "images/ferrari.jpg");
    imgSecond.setAttribute("src", "images/your-second-img-1.jpg"); // 替换为第二张图的第一个路径
  } else {
    // 切换到第二组图片
    imgFerrari.setAttribute("src", "images/ferrariwhte.jpg");
    imgSecond.setAttribute("src", "images/your-second-img-2.jpg"); // 替换为第二张图的第二个路径
  }
  
  counter++;
});

更易维护的优化写法 #

如果后续可能添加更多图片，可以把图片元素和对应路径分组管理，避免重复代码：

const myBtn = document.getElementById("darktheme");
// 存放所有需要切换的图片DOM元素
const targetImages = [
  document.getElementById("ferrarijs"),
  document.getElementById("secondCarImg") // 新增的图片ID
];
// 定义两组图片路径，顺序要和上面的图片元素一一对应
const imageGroups = [
  ["images/ferrari.jpg", "images/your-second-img-1.jpg"],
  ["images/ferrariwhte.jpg", "images/your-second-img-2.jpg"]
];

let toggleCount = 0;

myBtn.addEventListener("click", function() {
  // 计算当前使用的路径组索引
  const currentGroupIndex = toggleCount % 2;
  // 遍历所有图片，设置对应路径
  targetImages.forEach((img, idx) => {
    img.src = imageGroups[currentGroupIndex][idx];
  });
  toggleCount++;
});

注意事项：

• 确保新增图片的ID与代码中getElementById的参数完全一致
• 替换代码中占位的图片路径为你实际的文件路径
• 也可以用布尔变量（比如isFirstGroup）替代计数器，逻辑更直观：isFirstGroup = !isFirstGroup来切换状态

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