使用 JavaScript 将文件夹中的图库图像显示到网页中

Show gallery images from folder into webpage using JavaScript

本文关键字：图像 显示 网页 JavaScript 文件夹 使用      更新时间：2023-09-26

我正在尝试从文件夹中加载图像库。我正在使用JavaScript/jQuery。这是代码。

$(document).ready(function(){
    var dir = "images/"; // folder location
    var fileextension = ".jpg"; // image format
    var i = "1";
    $(function imageloop(){
        $("<img />").attr('src', dir + i + fileextension ).appendTo(".images");
        if (i==13) {
           alert('loaded');
         } else {
           i++;
           imageloop();
         };
    });   
});
<a href="#" onload="imageloop()"></a>

但它什么也没显示。请告诉我出了什么问题。谢谢。

将以下内容添加到<head>：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

我重写了代码，因为文件位置没有细节，请尝试使用 while 或 for 循环。

片段

$(document).ready(function() {
  $('#btn').click(function(e) {
    var dir = "http://loremflickr.com/200/150?random=";
    var i = 0;
    e.preventDefault();
    while (i < 14) {
      $("#images").append('<img src="' + dir + i + '" />');
      i++;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="images"></div>
<button id="btn"><a href="#">LOOP</a>
</button>

相关文章：