JSSOR - 使用JSSOR遍歷所有幻燈片和嵌套滑塊中的圖像

我有一個嵌套的滑塊設置和工作。我已經瀏覽了選項，但沒有看到任何可以讓它遍歷每張幻燈片（選項卡）上的所有圖像的地方。它當前遍歷所選幻燈片（選項卡）上的所有圖像，然後手動選擇下一張幻燈片（選項卡），然後循環顯示這些圖像。如果將自動播放選項設置爲true，則會循環顯示幻燈片（選項卡），但不循環顯示該幻燈片中的圖像。我希望它自動遍歷所有標籤和所有圖像。有沒有我錯過的選項？JSSOR - 使用JSSOR遍歷所有幻燈片和嵌套滑塊中的圖像

來源

2014-09-25 a344254

這就是嵌套滑塊的工作方式。沒有選項可以自動循環所有圖像。

如果您想讓所有圖像循環播放，則需要手動api調用。

你可以通過3個步驟來達到你的目標。

檢測第一個子滑塊的當前滑動索引。
如果它到達最後一張幻燈片，則將主滑塊切換到第二個子滑塊。
播放第二個子滑塊。

打開「嵌套slider.source.html」並進行以下更改，

  var childSlider = new $JssorSlider$(containerId, nestedSliderOptions); 
      childSlider.$On($JssorSlider$.$EVT_STATE_CHANGE, OnChildSliderStateChange); 
      nestedSliders.push(childSlider); 

     function OnChildSliderStateChange(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd) { 
      var childSlider = nestedSliders[jssor_slider1.$CurrentIndex()]; 
      if (progress == progressEnd && slideIndex == childSlider.$SlidesCount() - 1) { 
       //last slide (of current chlid sldier) plays over, pause the child slider, and move the main slider next 
       childSlider.$Pause(); 
       childSlider.$GoTo(0); 
       jssor_slider1.$Next(); 
      } 
     }

，然後你會得到http://www.jssor.com/testcase/nested-slider-loop-through.source.html

來源

2014-09-25 14:42:20 jssor

好的謝謝。如果有一個函數名稱可以開始查找，或者任何可以告訴我指示我在何處執行此操作的正確方向，我將不勝感激。謝謝！ – a344254 2014-09-25 14:59:29

我知道必須有比我做得更好的方式:)非常感謝 – a344254 2014-09-26 12:23:08

有可能是一個更好的方式來做到這一點，但這裏是什麼我想出了

_SelfSlideItem.$GoForNextSlide = function() { 
      if (_SlideshowRunner) { 
       var slideshowTransition = _SlideshowRunner.$GetTransition(_SlideCount); 

       if (slideshowTransition) { 
        var loadingTicket = _LoadingTicket = $JssorUtils$.$GetNow(); 

        var nextIndex = slideIndex + _PlayReverse; 
        var nextItem = _SlideItems[GetRealIndex(nextIndex)]; 
        return nextItem.$LoadImage($JssorUtils$.$CreateCallback(null, LoadSlideshowImageCompleteEventHandler, nextIndex, nextItem, slideshowTransition, loadingTicket), _LoadingScreen); 
       } 
      } 
      if ((_SlideCount - (slideIndex + _PlayReverse)) == 0){ 
       **//get reference to the tab selectors 
       var nodes = document.querySelectorAll("[u=thumbnavigator] .jssort12 [debug-id=slide-board] [debug-id]"); 
       //loop through them and find the one that's selected (.pav) and if it's not the one at the end of the list, select the next one, otherwise start at the beginning again 
       for (i=0; i<nodes.length; i++){ 
        if (nodes[i].querySelectorAll(".pav").length) 
         if ((i+1) == nodes.length) 
          document.querySelectorAll("[class^=p]")[0].click(); 
         else 
          document.querySelectorAll("[class^=p]")[i+1].click(); 
       }** 
      } 
      PlayTo(_CurrentSlideIndex + _Options.$AutoPlaySteps * _PlayReverse); 
     };

來源

2014-09-25 19:55:37 a344254

JSSOR - 使用JSSOR遍歷所有幻燈片和嵌套滑塊中的圖像

回答

相關問題