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

Question

如何使用jQuery读取名为music.xml的XML文件内容中的第一项，在DIV中显示它们五秒钟，读取下一个XML项目并显示五秒钟，循环浏览XML文件，然后从头开始重新开始？

HTML：

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

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

首先，我知道如何使用jQuery会给与image标签问题，解析这些方式（编辑：只有当你解析文本; XML原来是罚款），因为一旦你把它包装jQuery它会将<image>text</image>转换为<img>text。你可以解决这个问题，但这不太好。因此，让我们假设您已将<image>更名为<cover>。

加工jsFiddle减去$.ajax请求部分。

var music = []; 
var musicIndex = -1; 
var delay = 5000; 
var intervalId; // in case you want to clearInterval 
var $cover = $("#albumcover"); 
var $desc = $("#songdescription"); 

function rotateMusic() { 
    // Loop back to the beginning if necessary 
    if (++musicIndex === music.length) { 
    musicIndex = 0; 
    } 
    console.log(music[musicIndex].cover); 

    // Create a new image, tell it to append itself and description 
    // once it's loaded, tell it to load 
    $("<img>").load(function() { 
    $cover.empty().append($(this)); 
    $desc.text(music[musicIndex].desc); 
    }).attr("src", music[musicIndex].cover); 
} 

$.ajax({ 
    type: "GET", 
    url: "music.xml", 
    dataType: "xml", 
    success: function(xml) { 
      // Parse each item as a node 
      $(xml).find('item').each(function() { 
       // Add contents of item to music array 
       var $item = $(this); 
       music.push({ 
       cover: $item.find('image').text(), 
       desc: $item.find('description').text() 
       }); 

      }); 
      // Start rotating music, then set it to a delay 
      rotateMusic(); 
      intervalId = setInterval(rotateMusic, delay); 
      } 
}); 

Answer 2

尝试是这样的：

$.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。