从itunes rss提要中获取图片，并将图片放入bxslider中

Getting images from itunes rss feed and putting the pics in a bxslider

本文关键字：bxslider 取图片 rss itunes 获取      更新时间：2023-09-26

因此，我可以使用以下代码从itunes rss中获取相册的图像：

$("#parse").click(function (){
$(".bxslider").html("");
var country = $("#country").val();
var number = $("#top").val();
$.get("https://itunes.apple.com/"+country+"/rss/topsongs/limit="+number+"/xml" , function(data){
    var itunesArray = $(data).find("entry");
    itunesArray.each(function(){
        var image = $(this).find("im'':image").eq(1).text();
        var audio = $(this).find("link").eq(1).attr("href");

我的滑块的HTML：

<div class="slider">
     <ul class = "bxslider">        
    </ul>
    </div>

我尝试使用以下代码附加html：

$('.bxslider').append("<li><img src = "+image + " height = '100'  
width ='100' >" + "</li>");

滑块Jquery：

$('.bxslider').bxSlider({
             mode: 'fade',
             //captions: true,
             auto: true,
             //autoControls: true
             pagerCustom: '#bx-pager'
             /*minSlides: 2,
             maxSlides: 2,
             slideWidth: 170,
             slideMargin: 10,
             ticker: true,
             speed: 7000*/
            });

我可以把图片放进网页，但不能放在滑块里。我可以看到箭头，但我无法切换图像，可以同时看到所有图像。我应该一次见一个。我不知道发生了什么事。任何建议都将不胜感激。非常感谢。

我建议您在$.get Ajax成功回调中初始化bxSlider，即在所有图像都添加到DOM之后（正好在itunesArray.each()循环之后）。

我认为你还没有发布整个代码，但你可以参考下面的代码并接受这个想法（这个代码可能无法直接工作）：

$("#parse").click(function (){
    $(".bxslider").html("");
    var country = $("#country").val();
    var number = $("#top").val();
    $.get("https://itunes.apple.com/"+country+"/rss/topsongs/limit="+number+"/xml" , function(data){
        var itunesArray = $(data).find("entry");
        itunesArray.each(function(){
            var image = $(this).find("im'':image").eq(1).text();
            var audio = $(this).find("link").eq(1).attr("href");
            $('.bxslider').append("<li><img src = "+image + " height = '100' width ='100' >" + "</li>");
        });//each loop end
        $('.bxslider').bxSlider({
             mode: 'fade',
             //captions: true,
             auto: true,
             //autoControls: true
             pagerCustom: '#bx-pager'
             /*minSlides: 2,
             maxSlides: 2,
             slideWidth: 170,
             slideMargin: 10,
             ticker: true,
             speed: 7000*/
            });
    });
});
相关文章：