使用 jQuery 幻灯片从文件夹中获取图像

Question

我的 Jquery 幻灯片脚本看起来像这样

  $(function() {
    $('#bg').crossSlide({
      sleep: 3,
      shuffle: true,
      fade: 1
    }, [
  { src: 'core/design/images/bgs/1.jpg'},
  { src: 'core/design/images/bgs/2.jpg'},
  { src: 'core/design/images/bgs/3.jpg'},
  { src: 'core/design/images/bgs/4.jpg'}
    ])
  });

如您所见，我一一声明了图像的路径。有什么方法可以扫描文件夹中的图像并一次添加所有内容。也许，它可以用 PHP 完成？

Answer 1

是的。 可以使用 JS / jQuery 来完成：

在本地和实时服务器上都可以正常工作，并且允许您扩展允许的文件扩展名的分隔列表：

var folder = "core/design/images/bgs/";

$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.jpg|\.png|\.gif/) ) { 
                $("body").append( "<img src='"+ folder + val +"'>" );
            } 
        });
    }
});

在你的情况下，你想构造一个对象数组{src:"path"}，所以它可能看起来像：

var folder = "core/design/images/bgs/";

$.ajax({
    url : folder,
    success: function (data) {
        var srcArr = [];
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.jpg|\.png|\.gif/) ) { 
                var ob = {src : folder+val};
                srcArr.push( ob );
            } 
        });
        // Now that the Array is filled with Objects send to callback
        readFolderCallback( srcArr );
    }
});


function readFolderCallback( srcArr ) {
    $('#bg').crossSlide({
      sleep: 3,
      shuffle: true,
      fade: 1
    }, arrSrc);
}

https://stackoverflow.com/a/32940532/383904

Answer 2

这不能用 Javascript 来完成。但是使用嵌入式服务器端代码应该是可能的（如 PHP）。这是php中的一个例子。

存在一个名为glob 的函数，它可能适合您的目的。这是一个如何使用它的示例。

$path = <absolute path for the folder where images are located>
$images = glob($path.'/*.jpg') // this returns an array of file names only doesnt contain the path

现在你有了 php.ini 中的数组列表。您必须开始在 javascript 中使用它

$(function() {
$('#bg').crossSlide({
  sleep: 3,
  shuffle: true,
  fade: 1
}, [
<?php foreach($images as $filename){ ?>
    { src: 'core/design/images/bgs/<?php echo $filename.jpg ?>'},
<? } ?>

    ])
  });