17370845950

本文介绍如何将单张图片切换逻辑升级为支持任意数量图片的循环切换，使用数组存储图片路径并结合取模运算实现无缝轮播，代码简洁可扩展。

在实际开发中，仅切换两张图片（如深色/浅色主题对应图）往往不够灵活。若需支持三张、五张甚至更多图片的顺序轮播，硬编码 if/else 判断会迅速变得冗长且难以维护。更优雅的解法是将所有图片路径统一存入数组，用索引控制切换逻辑。

核心思路是：

• 预定义一个包含全部图片 URL 的数组；
• 使用 counter 记录当前显示的图片索引；
• 每次点击时，通过 (counter + 1) % images.length 自动计算下一个有效索引（取模确保循环回到首张图）；
• 直接赋值 img.src = images[nextIndex] 即可完成切换。

以下是优化后的完整示例代码：

@@##@@
切换图片

const images = [
  "images/ferrari.jpg",
  "images/ferrariwhte.jpg",
  "images/ferrari-red.jpg",   // 新增第三张图
  "images/ferrari-black.jpg"  // 新增第四张图
];

const myBtn = document.getElementById("darktheme");
const img = document.getElementById("ferrarijs");
let counter = 0;

myBtn.addEventListener("click", function() {
  counter = (counter + 1) % images.length;
  img.src = images[counter];
});

✅ 优势说明：

• 易扩展：只需向 images 数组追加新路径，无需修改逻辑；
• 防越界：% images.length 确保索引始终在 [0, length-1] 范围内；
• 语义清晰：counter 表示“已切换次数”，而非“当前状态”，逻辑更直观；
• 性能友好：无 DOM 查询或属性读取开销（如原代码中的 getAttribute("src") 已移除）。

⚠️ 注意事项：

• 确保所有图片路径真实存在且可访问，否则会显示破损图；
• 若需初始显示非第一张图，可初始化 counter = 1 或直接设置 img.src；
• 如需支持反向切换（上一张），可改用 (counter - 1 + images.length) % images.length 避免负数索引。

这种基于数组与取模的模式，是前端图片轮播、主题切换、幻灯片等场景的经典实践，兼顾简洁性与可维护性。