javascript - 如何使用 jQuery 将 XML 文件的内容按顺序加载到 HTML 中

Question

如何使用 jQuery 读取名为 music.xml 的 XML 文件内容中的第一项，将其在 DIV 中显示五秒钟，读取下一个 XML 项并显示五秒钟，循环遍历 XML文件，然后从头开始？

HTML:

<div id="music">
    <div id="albumcover"></div>
    <div id="songdescription"></div>
</div>

音乐.xml

<songs>
    <item>
        <image>music_01.jpg</image>
        <description>Description of first song</description>
    </item>
    <item>
        <image>music_02.jpg</image>
        <description>Description of second song</description>
    </item>
    <item>
        <image>music_03.jpg</image>
        <description>Description of third song</description>
    </item>
</songs>

Answer 1

尝试这样的事情:

$.ajax({
  'dataType': 'xml',
  'success': function(xml)
  {
    $(xml).find('item').each(function()
    {
      var image = $(this).find('image').text();
      var description = $(this).find('description').text();

      $('<div id="music" />')
        .append($('<div id="albumcover" />').append($('<img />').attr('src', image)))
        .append($('<div id="songdescription" />').text(description))
        .appendTo('body');
    });

    // Add the code for the carousel here.
  },
  'type': 'get',
  'url': 'music.xml'
});

您必须调整路径(xml 文件和图像所在的位置)以及您希望将其添加到文档中的位置。目前，它将附加在结束 BODY 元素之前。

然后，我建议寻找一个轮播 jQuery 插件，它将轮流浏览它们，而不是您必须处理它的那部分。您应该查看jCarousel Lite .