フォルダからの画像を使ったスライドショー

Question

私は、ハードコピーする代わりに、フォルダから画像を取り出すスライドショーを作りたいと思っています。

は今、私はこのようなものだ：あなたが見ることができる

<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の経験がありません、私はこれをオンラインで見つけましたが、私はそれが何を理解することができます。別の言語のソリューションも便利です。 PHPのように

Answer 1

あなたはXMLファイルから情報を引き出すためにAJAXを使うことができます。

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

にあなたは、少なくとも研究といくつかのAJAXクエリを実装するためにあなたには、いくつかの<Image>タグ

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

とXMLファイルが必要になります次に

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

HTMLはこれが十分でなければなりませんあなたページ。 詳しい情報はOPのコメントに基づいてhereとhere

---

アップデートを見つけることができます。 XMLファイルのマークアップはHTMLのマークアップと似ていますが、タグは自分で作成し名前を付けるという意味で自治的です。 あなたのXML、JavaScriptを保存することができ、およびHTMLは、
として、全て同じフォルダ内にあるファイル - Webページ（親フォルダ）
    - 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のは、ファイルを開いて、「優れたああ、ここ<Images>と呼ばれる4個のタグがあります、私は先に行くとページにそれらをポップよ」と言う

This introductionとthis how-to guideは非常に有用です。 あなたが従う必要がある構文規則を理解するには、おそらくhereと考える価値があります。 そのウェブサイトにはたくさんの情報があります。ブラウズして読んでみる価値は間違いありません。

スタックオーバーフローはあなたのためにすべての作業を行うためのものではなく、ここで適切な調査を行い、必要なものを実装するための情報がたくさんあるはずです。