jquery - 带有来自 XML 文件的图像路径的幻灯片

Question

我尝试了很多幻灯片，我在网上找到了我用它们完成的。这项任务应该很容易，但由于我是一个 jquery 新手，所以它打败了我：

应使用 XML、JQUERY 或 Javascript

我想创建一个幻灯片，为此我将图片放在 IMAGES 文件夹中，我要做的就是将这些图片的路径写入 XML 文件并从那里读取，如下所示：

<allImages>
 <oneImage>
 Image/picture1.jpg
 </oneImage>
 <oneImage>
 Image/picture2.jpg
 </oneImage>
 <oneImage>
 Image/picture3.jpg
 </oneImage>
 <oneImage>
 Image/picture4.jpg
 </oneImage>
</allImages>

没什么花哨的，只是一个幻灯片，在其路径位于 XML 文件中的图片上重复播放。这应该用 jQUERY 或 Javascript 来完成

Answer 1

我建议您使用 JSON 而不是 XML。JSON 比 XML 简单且快速

// JSON Object
var imagesJSON = [
  "Image/picture1.jpg",
  "Image/picture2.jpg",
  "Image/picture3.jpg",
  "Image/picture4.jpg"];

$(function() {
    LoopThroughImages();
});

var i=0;
function LoopThroughImages(){
    var imgPath = imagesJSON[i]; // Write the code for reading the image path from XML here
    $("#image").attr('src',imgPath  );
    i++;
    if(i >= 4)
        i=0;
    setTimeout(LoopThroughImages, 3000);
}

您可以在此处查看 JSFiddle 中的示例代码