Question

当有人访问/刷新页面时，我想尝试获取单个随机背景图像。

写出数组，如下所示，会产生所需的结果，但我想从文件夹中提取。

$(document).ready(function() {

  var randomNumber = Math.floor(Math.random() * images.length);
    var images=[
      './images/01.jpg',
      './images/02.jpg',
      './images/03.jpg',
    ];

  $('#backgroundImage').attr('src',images[randomNumber]); // Random image

});

使用ajax请求，如下所示，几乎可以正常工作，但Math.floor（）会返回一个字母或特殊字符，如

img alt="" id="backgroundImage" src="g"

而不是

img alt="" id="backgroundImage" src="./images/02.jpg"

代码：

var images = "images/";

$.ajax({
    url : images,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|png|gif)$/) ) { 
               $("body").append( "<img src='" + images + val[Math.floor(Math.random() * val.length)] +"'>" );
            }
        });
    }
});

非常感谢方向。

Answer 1

您现在正在使用val[Math.floor(Math.random() * val.length)]执行的操作是从字符串val中挑选一个随机字符（href元素上a属性的值问题）。

您可能想要创建<a>中所有图像的数组，然后使用原始代码从该数组中获取随机数据

var imgArray = $(data).find("a").filter(function(){
  return this.href.match(/\.(jpe?g|png|gif)$/)
}).map(function(){
    return images + this.href
}).get();

var randomNumber = Math.floor(Math.random() * imgArray.length);         
$('#backgroundImage').attr('src',imgArray[randomNumber]);

Math.floor（Math.random（）* val.length）返回一个字母而不是数字

1 个答案: