如何使用 Jquery 从我的图像目录中随机加载单个图像？

Question

我对 Jquery/Javascript 非常陌生，我想从我的图像目录将单个图像加载到我的主页上，以便在刷新时出现一个新的随机图像。 Jquery 有没有办法简单地访问我的图像文件夹并随机加载任何图像？我目前正在使用一个 JS 代码，该代码需要我输入我想要加载的每个图像名称。这是详尽的，虽然我可能对 Jquery 不太了解，但我认为这可以以更简洁的方式完成。如果我太天真了，请提前道歉。

Answer 1

当您在 HTML 标记中链接到它们时，您可以在 js 函数中使用相同的链接来链接到它们。

不确定您的目录结构是如何设置的，但作为示例。

• 目录
  • 图片
    • image1.jpg
  • 脚本
    • script.js
  • 风格
  • index.html

在您的 js 文件中，您可以链接到 images/image1.jpg

在<header>标签中添加：

<script type="text/js" src="js/script.js" />

然后在您的 script.js 文件中执行以下操作之一：

//Raw Javascript

  function changeMe()
  {
    document.getElementById("changeMe").src = "images/" + getRandomImage();
  }

  <img id="changeMe" onLoad="changeMe()" src="images/default.jpg" />


 //JQuery
  $(document).ready(function(){
    $("#changeMe").src("images/" + getRandomImage());
  });

  <img id="changeMe" src="images/default.jpg" />

那么您需要做的就是编写一个函数，该函数将从该目录返回一个随机图像。有很多方法可以做到这一点，但为了简单起见。

function getRandomImage() {
  var images = ["image1.jpg","image2.jpg","image3.jpg"];

  return images[Math.floor(Math.random() * images.length)];
}

JSFiddle