我使用带有箭头的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
滑块?
答案 0 :(得分:0)
它应该等待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$(...;
});
}
});