Jssor - 点击缩略图在Slider

时间:2015-06-25 07:50:00

标签: jquery html slider jssor

我构建了一个小模板,在这上面有一个Jssor Slider,这个Slider上的图片也是缩略图。 通过单击缩略图,我希望此图片显示在滑块中。我怎么能用Jquery做到这一点。

目前的代码:

var a_td_pic = [$("#tecdoc_bild1_thumb").attr("src"), $("#tecdoc_bild2_thumb").attr("src"), $("#tecdoc_bild3_thumb").attr("src"), $("#tecdoc_bild4_thumb").attr("src"),$("#hersteller_logo_thumb").attr("src")]; 
var a_ntd_pic = [$("#detailbild1_thumb").attr("src"), $("#detailbild2_thumb").attr("src"), $("#detailbild3_thumb").attr("src"), $("#detailbild4_thumb").attr("src"), $("#detailbild5_thumb").attr("src"),$("#hersteller_logo_thumb").attr("src")]; 
a_td = cleanArray(a_td_pic);
a_ntd = cleanArray(a_ntd_pic);
var check = [$("#tecdoc_bild1_thumb").attr("src"), $("#tecdoc_bild2_thumb").attr("src"), $("#tecdoc_bild3_thumb").attr("src"), $("#tecdoc_bild4_thumb").attr("src")];  
if (check[0] == "" && check[1] == "" && check[2] == "" && check[3] == "") {

    // Kein TecDoc 
    console.log("Kein TecDoc Bild");
    $("#thumb").html("");
    var i_3 = 0; 
    while (a_ntd[i_3]) {
        console.log(a_ntd[i_3]); 
        $("#thumb").append('<div id="thumb_'+i_3+'"><img src="'+a_ntd[i_3]+'" class="thumb" /></div>'); 
        i_3 ++; 
    }
    if(a_ntd.length > 3) {
            // Wenn mehr als 3 Bilder vorhanden sind wird auf Thumbnail Slider angepasst
    }
            var i_4 = 0; 
    while (a_td[i_4]) {
        $("#thumb_"+i_4).click(function() {

        });
        i_4 ++;
    }
}   

else {
    console.log("TecDoc Bild"); 
    $("#thumb").html("");
    var i_3 = 0; 
    while (a_td[i_3]) {
        console.log(a_td[i_3]); 
        $("#thumb").append('<div id="thumb_'+i_3+'"><img src="'+a_td[i_3]+'" class="thumb"/></div>');
        i_3 ++; 
    }
    if(a_td.length > 3) {
        // Wenn mehr als 3 Bilder vorhanden sind wird angepasst auf den Slider
    }
    var i_4 = 0; 
    while (a_td[i_4]) {
        $("#thumb_"+i_4).click(function() {
            $("#pic_"+i_4).css("left","0px");  
        });
        i_4 ++; 
    }
}

祝你好运

1 个答案:

答案 0 :(得分:0)

如果点击了第3个缩略图,请使用以下代码显示第3张幻灯片。

jssor_slider1 $转到(2)。 //要么 。jssor_slider1 $ PlayTo(2);