jquery - 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>