使用jQuery幻灯片显示文件夹中的图像
我的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完成？
它不能用Javascript完成。 但是使用嵌入式服务器端代码应该是可能的（如PHP）。 这是php中的一个例子。
存在一个名为glob的函数，它可能适合您的目的。 以下是如何使用它的示例。
$path = $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 }, [ { src: 'core/design/images/bgs/'}, ]) });
是。 它可以使用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( "
" ); } }); } });
在你的情况下，你想构建一个对象数组{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); }