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

使用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中的数组列表。你必须在javascript中开始使用它

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

    ])
  });

Answer 2

是。可以使用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

使用jQuery幻灯片显示文件夹中的图像

2 个答案: