jQuery - 从目录加载随机图像

Question

jQuery noob在这里，为这个问题道歉！

我正在为客户编写一个静态网站，他们给了我一个相当有趣的挑战，我不知道如何处理。

他们希望页面上有一个按钮，从目录中获取随机图像并将它们放在网格中。我很喜欢HTML和样式，我不知道从哪里开始使用jQuery。

这基本上是我想要实现的一个演示，假设每隔一秒按下按钮。

这是否可行和/或仅使用jQuery（即将其作为静态站点）？

非常感谢答案和解释，因为我仍然是网络开发的学习者！

谢谢！

Answer 1

尝试使用$.map()，.remove()，setTimeout，.appendTo()，.on()

var updateImages = function updateImages() {
// remove all images from `#container` element having images as child nodes
$("#container img").remove();
// append eight "random" images to `#container`
$.map($.makeArray(Array(8)), function(val, key) {
  setTimeout(function() {
    $("<img />", 
      // image files named "image-0.jpg" - "image-7.jpg" ,
      // `key` : `0` - `7`
      {"src": "/path/to/images/image-" + key + ".jpg"})
    .appendTo("#container");
  }, 1 + Math.floor(Math.random() * 25))
});    
};
// call `updateImages`
$("button").on("click", updateImages);
// set reference to `interval`
// var interval = 0;
// call `updateImages` every `1000` ms
// interval = setInterval(function() {
//  updateImages()
// }, 1000);

Answer 2

因此，假设您可以控制图像文件名，我会将它们命名为您提到的示例，image.png。你的js看起来像这样（我使用了一个样式表）：

$(function(){
    loadRandom();
    $('#clickMe').on('click',function(){
        loadRandom();
    });
});
function loadRandom(){
    var ranNums=[];
    while(ranNums.length<8){
        var t=Math.floor((Math.random()*12)+1);
        if(ranNums.indexOf(t)==-1)
            ranNums.push(t);
    }
    var i=0;
    $('#imageTable > tbody > tr > td > img').each(function(){
        $(this).attr('src','image'+ranNums[i]+'.png');
        i++;
    });
}

html再次使用表格进行样式化，看起来像是

<input type='button' id='clickMe' value='Click Me' />
<table id='imageTable'>
<tr>
    <td><img src=''></td>
    <td><img src=''></td>
    <td><img src=''></td>
    <td><img src=''></td>
</tr>
<tr>
    <td><img src=''></td>
    <td><img src=''></td>
    <td><img src=''></td>
    <td><img src=''></td>
</tr>
</table>