Question

所以我想制作一个幻灯片，将图片从文件夹中取出，而不是硬编码。

现在我有这样的事情：

{{1}}

Als你可以看到，图片在代码中，但我希望它们从地图中删除，所以如果我将照片添加到该地图，幻灯片也会变长。这是为了更轻松地更新幻灯片。因为我不是那个会使用它的人，所以他们想要这样。

我不是那种经验丰富的javascript，我在网上找到了这个，但我能理解它的作用。使用其他语言的解决方案也很有用！像PHP

Answer 1

您可以使用AJAX从XML文件中提取信息。

$(function () {
$.ajax({
    type: "GET", //call the xml file for reading
    url: "Images.xml", //source of the file
    dataType: "xml", //type of data in the file
    success: parseXml //function to execute when the file is open and ready for use
});
function parseXml(xml) {
    var xImages = xml.getElementsByTagName("Image");//Get all nodes tagged "Image" in the xml document.
    var maxImages = xImages.length;//Find total number of nodes, for use in the iterations
    function fillImages() {
        for (i = 0; i < maxHeadlines; i++) {
            $("#ImageList").append('<li><img src="' + xImages.childNodes[0].NodeValue[0] + '"</li>');
            //one at a time, append the images
        }
    }
}

HTML

<ul class="ImageList">
</ul>
<!-- This will be populated through the xml - so no <li> elements need to be harcoded in to the page -->

然后，您将需要一个包含<Image>个标记的XML文件

<File>
    <Image>file/path/to/image.png</Image>
    <Image>file/path/to/image.png</Image>
</File>

这应该足以让您至少研究并在页面中实现一些AJAX查询。可以找到更多信息here和here

根据OP的评论进行更新。您的XML文件标记看起来与HTML的类似，但标签是自我管理的，因为您自己创建并命名它们。您可以将XML，JavaScript和HTML文件全部保存在同一文件夹中，如此 - 网页（父文件夹）
    - index.html
    - script.js
    - Images.xml
这样，XML文件的URL将只是“Images.xml”

至于构建XML文档，它真的很容易。假设您想要一个包含不同人员信息的文档

<People>
    <Person>
        <Name>Greg</Name>
        <Age>21</Age>
        <Height>6'2"</Height>
    </Person>
    <Person>
        <Name>Sarah</Name>
        <Age>45</Age>
        <Height>5'5"</Height>
    </Person>
    <Person>
        <Name>Martin</Name>
        <Age>80</Age>
        <Height>4'11"</Height>
    </Person>
</People>

这就是它的全部。您可以使用它来存储您想要的任何信息，并以您想要的任何方式组织结构，以及您想要使用的任何标记名称

这只是存储信息的地方。 JQuery然后打开文件并说“哦，非常好，这里有4个标签叫<Images>，我会继续将它们弹出到页面”

This introduction和this how-to guide非常有帮助。查看here以了解您需要遵循的语法规则可能也值得一看。该网站上有大量的信息，绝对值得浏览并阅读所有信息。

记住Stack Overflow不是为你做所有的工作，这里应该有大量的信息供你进行适当的研究并实现你想要的。

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

1 个答案: