带有箭头的 Jssor 缩略图导航器

Question

我使用带有箭头Jssor缩略图导航器。如何动态地显示此滑块，图像数据来自xml？这是我的代码：

.xml：

<resultset> 
 <error>0</error>
 <product>
  <category>Category</category>
  <name>namenamename</name>  
  <desc>Description</desc>
  <pics>
   <id>product_2_000001</id>
   <id>product_2_000002</id>
   <id>product_2_000003</id>
   <id>product_2_000004</id>
   <id>product_2_000005</id>
   <id>product_2_000006</id>
  </pics>
</product>

和我的 html 代码：

和我的 JS

function ProductDetail() {
$.ajax ({
    type: "POST",
    url: "products.xml",
    dataType: "xml",
    success: function(xml) {
      var x = $(xml).find("product");
      $(xml).find("product").each(function () {
          $("#product_title").html($(this).find("name").text());
          $("#product_desc").html($(this).find("desc").text());
          $(x).find("pics").each(function(){
                count = $(this).children("id").size();
                alert(count);
                var a = 0;             
                var b = 0;
                while (a < count) {
                    var k = $(this).children("id").text().substr(b, 16);
                    var n = k.slice(7);
                    s = n.slice(1, 2);
                    m = k.slice(10);
                    $("#product").append('<div id="product_gallery' + parseInt(m) + '" style="width: 360px; height: 240px; top: 0px; left: 0px; position: absolute; overflow: hidden;"  debug-id="slide-' + parseInt(m) +'">' );
                    alert('<img u="image" id="image' + parseInt(m) +'"/>');
                    var i = "#product_gallery" + parseInt(m);
                    $(i).append('<img u="image" id="image' + parseInt(m) +'" border="0" style="width: 360px; height: 240px; top: 0px; left: 0px; display: inline; position: absolute;"  jssor-content="true"/>');
                    $(i).append('<img u="thumb" id="thumb' + parseInt(m) +'" style="display: none;" jssor-content="true"/>');
                    $("#image" + parseInt(m)).attr( "src", function() { return "proc/getitem.php?code="  + domain +  "&id=" + k; });
                    $("#thumb" + parseInt(m)).attr( "src", function() { return "proc/getitem.php?code="  + domain +  "&id=" + k + "&thumb=" + m ;});
                    $("#product").append('</div>');
                b +=16;
                a++;
                }
            });
     });
    }
  });

}

问题：thumbnail not working, and slider image is not sliding，

！[循环工作时][2]![拇指和图像源正常工作][3]

如何修复它，或以其他方式动态jssor滑块？

Answer 1

它应该等待 ajax 调用完成来初始化 jssor 滑块，

function ProductDetail() {
$.ajax ({
    type: "POST",
    url: "products.xml",
    dataType: "xml",
    success: function(xml) {
      var x = $(xml).find("product");
      $(xml).find("product").each(function () {
          $("#product_title").html($(this).find("name").text());
          $("#product_desc").html($(this).find("desc").text());
          $(x).find("pics").each(function(){
                count = $(this).children("id").size();
                alert(count);
                var a = 0;             
                var b = 0;
                while (a < count) {
                    var k = $(this).children("id").text().substr(b, 16);
                    var n = k.slice(7);
                    s = n.slice(1, 2);
                    m = k.slice(10);
                    $("#product").append('<div id="product_gallery' + parseInt(m) + '" style="width: 360px; height: 240px; top: 0px; left: 0px; position: absolute; overflow: hidden;"  debug-id="slide-' + parseInt(m) +'">' );
                    alert('<img u="image" id="image' + parseInt(m) +'"/>');
                    var i = "#product_gallery" + parseInt(m);
                    $(i).append('<img u="image" id="image' + parseInt(m) +'" border="0" style="width: 360px; height: 240px; top: 0px; left: 0px; display: inline; position: absolute;"  jssor-content="true"/>');
                    $(i).append('<img u="thumb" id="thumb' + parseInt(m) +'" style="display: none;" jssor-content="true"/>');
                    $("#image" + parseInt(m)).attr( "src", function() { return "proc/getitem.php?code="  + domain +  "&id=" + k; });
                    $("#thumb" + parseInt(m)).attr( "src", function() { return "proc/getitem.php?code="  + domain +  "&id=" + k + "&thumb=" + m ;});
                    $("#product").append('</div>');
                b +=16;
                a++;
                }
            });
        ...
        var jssor_slider1 = new $JssorSlider$(...;
     });
    }
  });