javascript - Slideshow with images from a folder - Stack Overflow

admin管理员组

文章数量:1414628

So i want to make a slideshow which takes the pictures out of a folder, instead of hardcoding it.

now i got something like this:

<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>

Als you can see, the images are in the code, but i want them to be taken out of a map, so if i add photos to that map, the slideshow gets longer too. This is to update the slideshow it easier. Since i'm not the one who's gonna use it, they wanted it like this.

i'm not that experienced with javascript, i found this one online but i can understand what it does. an solution with another language can be usefull too! like PHP

So i want to make a slideshow which takes the pictures out of a folder, instead of hardcoding it.

now i got something like this:

<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>

Als you can see, the images are in the code, but i want them to be taken out of a map, so if i add photos to that map, the slideshow gets longer too. This is to update the slideshow it easier. Since i'm not the one who's gonna use it, they wanted it like this.

i'm not that experienced with javascript, i found this one online but i can understand what it does. an solution with another language can be usefull too! like PHP

• javascript
• php
• jquery
• html
• css

Share Improve this question Follow edited Oct 21, 2016 at 10:53 Mr.thatguy asked Oct 21, 2016 at 10:45 Mr.thatguyMr.thatguy 10811 gold badge11 silver badge88 bronze badges 3

• 1 Handling files is a server side process, so unless your are using your javascript server side (such as node or so), this is probably not possible. Try to look at a server side solution using php, or some other server-side language. – JohannesB Commented Oct 21, 2016 at 10:49
• Processing Files/Images can handle from server side code. If you are using PHP, just loop all the files from the directory then set <img src="image file urls"> and echo it. Now you can get images in your browser. Hence can do slideshow or what ever using javascript. – saravanabawa Commented Oct 21, 2016 at 12:29
• What else did you try to resolve your problem? Why is this tagged with PHP and CSS, but does not contain any such code? – Nico Haase Commented Feb 25, 2022 at 9:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You could use AJAX to pull the information from an XML file.

$(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 -->

Then you will need an XML file with some <Image> tags

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

This should be enough for you to at least research and implement some AJAX queries into your page. More information can be found here and here

---

Update based on OP's ments. Your XML file markup will look similar to that of your HTML, but the tags are self-governed, in that you create and name them yourself. You can save your XML, JavaScript, and HTML files all in the same folder, as such
- Web Page (parent folder)
  - index.html
  - script.js
  - Images.xml
This way, the URL for the XML file will simply be "Images.xml"

As for constructing XML documents, it really couldn't be easier. Say you want a document that contains information about different people

<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>

That's all there is to it. You can use it to store any information you want and organise the structure any way you want, with whatever tag names you want to use

This is just somewhere to store the information. The JQuery then opens the file and says "Oh excellent, there's 4 tags here called <Images>, I'll go ahead and pop them in to the page"

This introduction and this how-to guide are very helpful. It's probably also worth looking here to get an understanding of the syntax rules you need to follow. There's plenty of information on that website, and it's definitely worth having a browse around and reading up on it all.

Remember Stack Overflow isn't here to do all the work for you, and there should be plenty of information made available here for you to do the appropriate research and implement what it is you want.

Added Code Snippet below, just locate your XML with this and it should work fine -- FOR JQUERY -- BOTH SNIPPETS WORK IF YOU DEFINE THE XML FILE SOMEWHERE / HOSTED OR LOCAL

<!-- 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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="imglist" class="ImageList">
</ul>

For Vanilla JS i have something else Entirely set up

<!-- 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>

本文标签： javascriptSlideshow with images from a folderStack Overflow