幻灯片显示来自文件夹的图像 - Slideshow with images from a folder

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

现在我得到了这样的东西:

<img class="images" src="slideshow/slide0.png">
<img class="images" src="slideshow/slide1.png">
<img class="images" src="slideshow/slide2.png">
<img class="images" src="slideshow/slide3.png">
<img class="images" src="slideshow/slide4.png">
<img class="images" src="slideshow/slide5.png">
<img class="images" src="slideshow/slide6.png">
<script language='javascript'>
    //script voor de slideshow
    var myIndex = 0;
    carousel();
    function carousel() {
        var i;
        var x = document.getElementsByClassName("images");
        for (i = 0; i < x.length; i++) {
           x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 5000); // Change image every 5 seconds
    }
</script>

你可以看到，图像在代码中，但我希望它们从地图中取出，所以如果我向地图添加照片，幻灯片也会变长。这样更新幻灯片就容易多了。因为我不是那个要用它的人，所以他们希望它是这样的。

我不是有经验的javascript，我在网上找到了这个，但我能理解它的作用。使用另一种语言的解决方案也很有用!

可以使用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查询。更多信息可以在这里和这里找到

根据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>，我把它们放到页面里"

这个介绍和这个操作指南非常有帮助。为了理解需要遵循的语法规则，这里可能也值得一看。那个网站上有大量的信息，绝对值得浏览一下，仔细阅读一下。

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

添加下面的代码片段，只需找到您的XML与此，它应该工作良好-为JQUERY -如果您将XML文件定义在/宿主或本地

，则这两个片段都可以工作。

<!-- XML -->
<whatever>
    <image>path/to/file.jpg</image>
    <image>path/to/file.jpg</image>
</whatever>

fetch('path/to/xml.xml') // File You want to grab
  .then(function(resp) { 
    return resp.text(); // Response promise function
  }).then(function(data) { // data transform function
let parser = new DOMParser(), // Create a parser for DOM
xmlDoc = parser.parseFromString(data, 'text/xml'); // Actually take the text and Convert it to an HTML DOM Element
var xImages = xmlDoc.getElementsByTagName('image')
var maxImages = xImages.length 
console.log(xImages.item(0).textContent)
  for (i = 0; i < maxImages; i++) {
    $(".ImageList").append('<li><img src="' + xImages.item(i).textContent + '"</li>');//one at a time, append the images
        }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="imglist" class="ImageList">
</ul>

对于香草JS，我有一些其他的东西完全设置

<!-- XML -->
<whatever>
    <image>path/to/file.jpg</image>
    <image>path/to/file.jpg</image>
</whatever>

fetch('path/to/xml.xml') // File You want to grab
  .then(function(resp) { 
    return resp.text(); // Response promise function
  }).then(function(data) { // data transform function
let parser = new DOMParser(), // Create a parser for DOM
xmlDoc = parser.parseFromString(data, 'text/xml'); // Actually take the text and Convert it to an HTML DOM Element
var xImages = xmlDoc.getElementsByTagName('image')
var maxImages = xImages.length
var liopen = '<li><img src="'
var liclose = '"</li>'
console.log(xImages.item(0).textContent)
  for (i = 0; i < maxImages; i++) {
    document.querySelector(".ImageList").innerHTML += '<li><img src="' + xImages.item(i).textContent + '"</li>';//Vanilla JS approach to append elements through each iteration
        }
  })

<ul id="imglist" class="ImageList">
</ul>