Question

我是jQuery的新手，我正在努力实现以下解决方案。

我正在使用一个漂亮的图像轮播/滑块，要求我在页面上有一个div，其中包含我想要轮播使用的图像。我希望能够灵活地将图像放在文件夹中而不是硬编码，然后显示图像，所以：

我的服务器上包含任意数量图片的文件夹（img）
创建图像列表（数组）的一些解决方案（路径）
要与轮播一起使用的列表或数组，是否只是生成HTML我猜是问题的一半！

我很感激帮助！

@RobW - 正如我所说，我正在学习..

/ --- edit：我找到了一个使用jQuery模板的解决方案。它可能不是最聪明的，但它是：

我创建了一个我希望放置图像的div：

<div id="imageContainer"></div>     
<!-- Create template -->
    <script id="imageTemplate" type="text/x-jquery-tmpl">
        <img id="imageItem" src='../PublishingImages/${Name}' alt="${Desc}" />
    </script>
<!-- Get data -->
    <script type="text/javascript">
        $(document).ready(function () {
            $.getJSON(
                '../_vti_bin/ListData.svc/Images',
                    function(data) {
                        $('#imageTemplate')             //select the template
                            .tmpl(data.d.results)       //bind it to the data
                                .appendTo('#imageContainer');   //render the output
                                    });
                                    }); 
    </script>

Answer 1

jQuery是Javascript的框架，它是一种客户端语言，因此它不可能直接与您的服务器交互以从文件夹中获取文件列表。

要实现这一点，您需要使用服务器端语言（如PHP或ASP.Net）来获取文件列表。然后，您可以直接将其写入页面，或使用jQuery发出AJAX请求以获取数据。

Answer 2

你需要PHP（或其他东西）。

查看dynamic examples。在那里，您可以学习如何加载图像。您还需要编写一个小的PHP脚本。 Get startet with PHP。我猜您主要需要scandir和foreach loop。

Answer 3

实际上，如果服务器返回文件夹的索引页面，它是可能的。

只需抓取页面上的所有锚点引用即可。

这是一个例子:(从一周或两周前在线发现的类似内容进行修改）

var paintingarray = [];
var dir = "paintings";
var fileextension=".jpg";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //List all jpg files on the page
            $(data).find("a:contains(" + fileextension + ")").each(function () {
             var filename = this.href.replace(window.location.host,"").replace(window.location.pathname, "").replace("http://","");              

            paintingarray.push(dir + "/"+filename);

        });
    }
});

jQuery - 创建一个包含位于服务器文件夹中的图像的数组

3 个答案: