Jssor創建動態滑塊

Question

首先感謝完美的滑塊！我的問題是： 我在一個網頁上設置了2個圖像，點擊其中的每個圖像，我想打開一個帶有Jssor滑塊的覆蓋視圖來顯示圖像。該集合中的圖像大小相同，例如，在集合1中，尺寸是400 * 300，而集合2中的尺寸是500 * 300。我想點擊集時動態創建一個Jssor滑塊：

$("img").click(function(){ 
    if (this.getAttribute('id') == 'overlayImage'){ 
     return; 
    } 
    if (this.getAttribute('u') == 'image'){ 
     return; 
    } 
    var imgname = this.getAttribute('id'); 
    //set images 
    if(imgname == 'img29'){ 
     var imgheight,imgwidth,actualwidth,actualheight; 
     var winheight=window.innerHeight,winwidth=window.innerWidth; 
     var imgarray; 
      imgwidth = 2572.0; 
      imgheight = 1830.0; 
      imgarray=["29c","29d","29e","29f","29g","29h","29i","29j","29k","29l","29m","29n","29o","29p","29q", 
      "29r","29s","29u"]; 

     //calculate size using screen size 
     if(winheight>winwidth){ 
      //on mobile 
      actualwidth=winwidth-140; 
      actualheight=imgheight*actualwidth/imgwidth; 
     } 
     var slider1 = document.getElementById('slider1_container'); 
     var slider2 = document.getElementById('slider_content'); 
     slider1.style.width=winwidth+'px'; 
     slider1.style.height=actualheight+'px'; 
     slider2.style.width=winwidth+'px'; 
     slider2.style.height=actualheight+'px'; 
     slider1.style.top=(winheight-actualheight)/2+'px'; 

     //want to clean the images added last time. 
     slider2.innerHTML=""; 

     for (var i = 0; i<imgarray.length; i++) { 
      var oname = imgarray[i]; 
      var elem = document.createElement("img"); 
      elem.src="img/"+oname+".jpg"; 
      elem.setAttribute('u', 'image'); 

      var div = document.createElement("div"); 
      div.appendChild(elem); 
      slider2.appendChild(div); 
     } 

     var options = { 
      $AutoPlay: true, 
      $PauseOnHover: 1,        
      $ArrowKeyNavigation: true,       
      $SlideWidth: actualwidth,         
      $SlideHeight: actualheight,         
      $SlideSpacing: 35,         
      $DisplayPieces: 2,         
      $ParkingPosition: 70,        

      $ArrowNavigatorOptions: {      
       $Class: $JssorArrowNavigator$,   
       $ChanceToShow: 2,        
       $AutoCenter: 2,         
       $Steps: 1          
      } 
     }; 
     var jssor_slider1 = new $JssorSlider$("slider1_container", options); 



     $('#imageSetBox').show(); 
     $('#hrdiv').hide(); 
     $('#header').hide(); 

     return; 
    } 

和HTML：

<div id="imageSetBox" class="wrapOverlay"> 
    <div id="slider1_container" style="position: relative; top: 60px; left: 0px; width: 800px; 
     height: 300px; overflow: hidden;"> 
     <!-- Slides Container --> 
     <div id="slider_content" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px; height: 300px;overflow: hidden;"> 
     </div> 

     <!--#region Arrow Navigator Skin Begin --> 
     <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html --> 
     <style> 
      /* jssor slider arrow navigator skin 13 css */ 
      /* 
      .jssora13l     (normal) 
      .jssora13r     (normal) 
      .jssora13l:hover   (normal mouseover) 
      .jssora13r:hover   (normal mouseover) 
      .jssora13l.jssora13ldn  (mousedown) 
      .jssora13r.jssora13rdn  (mousedown) 
      */ 
      .jssora13l, .jssora13r { 
       display: block; 
       position: absolute; 
       /* size of arrow element */ 
       width: 70px; 
       height: 1000px; 
       cursor: pointer; 
       background: url(arrows/a13.png) no-repeat; 
       overflow: hidden; 
      } 
      .jssora13l { background-position: -10px -35px; } 
      .jssora13r { background-position: -70px -35px; } 
      .jssora13l:hover { background-position: -130px -35px; } 
      .jssora13r:hover { background-position: -190px -35px; } 
      .jssora13l.jssora13ldn { background-position: -250px -35px; } 
      .jssora13r.jssora13rdn { background-position: -310px -35px; } 
     </style> 
     <!-- Arrow Left --> 
     <span u="arrowleft" class="jssora13l" id="leftarrow" style="top: 0px; left: 0px;"> 
     </span> 
     <!-- Arrow Right --> 
     <span u="arrowright" class="jssora13r" id="rightarrow" style="top: 0px; right: 0px;"> 
     </span> 
     <!--#endregion Arrow Navigator Skin End --> 
     <a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a> 
    </div> 
</div> 

結果是：我第一次點擊一組，滑塊完美呈現。但是，第二次單擊它時，圖像不會縮放以適合滑塊，因爲圖像更大，只顯示它們的一角。

那麼我該如何解決它？我想初始化滑塊多次使用

var jssor_slider1 = new $JssorSlider$("slider1_container", options); 

是一個壞主意，但我不知道如何解決它。任何幫助表示讚賞。

Answer 1

當jssor滑塊初始化，在slider1_container的內容將被重新格式化，所以當你創建動態的第一次都會好的。

要再次動態地創建一個新的滑動器，在slider1_container內部元件是不能重複使用。你會清除內部元素並重新創建它。