JavaScript中实现随机图片

在现代网站中使用单一的背景图片很容易让用户感到审美疲劳。为了让您的博客或者主页更加生动多变，我们可以利用JavaScript编写一个简单却有效的函数。当访客每次访问或刷新页面时，网站将随机载入一张背景图片。

设置背景图片

首先，我们需要准备多张背景图片，并按统一的命名规则进行命名。例如，可以使用 name<num_id>.png 格式，其中 num_id 从 1 开始递增。这将有助于程序自动识别和随机选择图片。

实现随机背景功能

在负责处理页面背景的JavaScript组件中，添加以下代码：

// 请先确认你的图片总数，并进行设置（例如：有 10 张图片）
const totalImageCount = 10;  // 将该值替换成你的实际图片数量

// 生成一个随机整数以选择背景图片
const bgRandom = Math.floor(Math.random() * totalImageCount + 1);

// 定义一个函数，用于切换背景图链接
const changeBg = (type) => {
  if (type == 0) {
    // 当类型为 0 时，从本地或指定的CDN加载一张随机图片，使用时将代码中的文件名与拓展名替换为你的实际文件信息
    bgUrl.value = `https://cloud.waveyo.cn/Services/images/background/background${bgRandom}.jpg`;
  } else if (type == 1) {
    // 使用外部API提供的背景图片（例如：每日必应美图）
    bgUrl.value = "https://api.dujin.org/bing/1920.php";
  } else if (type == 2) {
    // 获取一张随机壁纸
    bgUrl.value = "https://api.vvhan.com/api/wallpaper/views";
  } else if (type == 3) {
    // 获取一张ACG风格的壁纸
    bgUrl.value = "https://api.vvhan.com/api/wallpaper/acg";
  }
};

使用方法

1. 命名你的图片：请确保将背景图片按照 name1.png, name2.png, …, nameN.png 的格式存储在指定目录中。

2. 调整图片数量：修改 totalImageCount 常量，反映你实际的图片数量。

3. 调用函数：选择你希望的类型传递给 changeBg 函数来更换背景。你可以将调用逻辑放在页面加载时自动执行，以便每次打开页面时背景都会随机变化。

结语

通过这种方式，您的网站将变得更加有趣和吸引人。随机的背景不仅增加了访客的参与度，同时也提升了整体视觉体验。当这项技术与API结合时，更可以每天带来不同风格的动态背景，为用户提供耳目一新的感觉。

您只需要简单地修改几行代码，就能实现一个令人难以忘怀的用户体验。尝试加入更多的图片或扩展API功能，发掘更多的可能性！

这种写法提供了额外的背景信息和细节步骤，帮助用户明确每一个步骤，同时保持了技术实现部分的聚焦与清晰。