我如何爲每個幻燈片/幻燈片設置不同的持續時間？ （未轉換時間）

Question

我想知道是否有可能爲每張幻燈片設置不同的fotorama時間。

像這樣的事情

<div class="fotorama"> 
<div data-duration="3000">Content here</div> 
<div data-duration="10000">Content here</div> 
</div> 

Answer 1

我處理這種方式，通過聽取fotorama.showend事件：

在你的基地JS腳本，包括這個......我沒有測試它多fotoramas一個頁面上，所以它可能會影響到所有的頁面上，你將不得不修改變量，以針對特定fotorama。

$(function() { 
    $('.fotorama') 
     /* Listen to the "showend" event... the "show" event is for the beginning of a transition, while "showend" is at the end of the transition. */ 
     .on('fotorama:showend', 
      function (e, fotorama, extra) { 
       /* do a switch on the active index + 1, if you want the current frame at base 1 instead of base 0 */ 
       switch (fotorama.activeIndex + 1){ 
        case 2: 
         fotorama.setOptions({autoplay: 3000}); 
         break; 
        case 5: 
         fotorama.setOptions({autoplay: 15000}); 
         break; 
        case 6: 
         fotorama.setOptions({autoplay: 7000}); 
         break; 
        case 7: 
         fotorama.setOptions({autoplay: 20000}); 
         break; 
        case 8: 
         fotorama.setOptions({autoplay: 2000}); 
         break; 
        default: 
         /* You could choose to always set the autoplay to a default value here as shown, but it may be more efficient to just always set it back to default on the first slide of a "default duration" sequence (above ex. slide 2 of slides 2-4, or slide 8 of slides 8-the end), instead of setting a new autoplay value on each and every slide regardless of whether or not it's needed. */ 
         fotorama.setOptions({autoplay: 2000}); 
         break; 
       } 

       /* see the event fire in developer console, for debugging only */ 
       console.log('## ' + e.type); 
       console.log('active frame', fotorama.activeFrame); 
       console.log('additional data', extra); 
      } 
     ) 
    }); 

重要的是要認識到，「秀」和「showend」事件是滑動具體，沒有幻燈片，具體是非常重要的。

，如果你想某些幻燈片，諸如來自淡入淡出轉換到滑動的過渡，或加速或減緩過渡持續時間結束之後改變其他屬性這也是方便的。

如果你想在一個轉變的開始在一些事情上採取行動，聽「fotorama：秀」 ......事件的完整列表來聽，用控制檯調試代碼從API page：

$(function() { 
    $('.fotorama') 
     // Listen to the events 
     .on('fotorama:ready ' +   // Fotorama is fully ready 
      'fotorama:show ' +   // Start of transition to the new frame 
      'fotorama:showend ' +   // End of the show transition 
      'fotorama:load ' +   // Stage image of some frame is loaded 
      'fotorama:error ' +   // Stage image of some frame is broken 
      'fotorama:startautoplay ' + // Slideshow is started 
      'fotorama:stopautoplay ' + // Slideshow is stopped 
      'fotorama:fullscreenenter ' + // Fotorama is fullscreened 
      'fotorama:fullscreenexit ' + // Fotorama is unfullscreened 
      'fotorama:loadvideo ' +  // Video iframe is loaded 
      'fotorama:unloadvideo',  // Video iframe is removed 
      function (e, fotorama, extra) { 
       console.log('## ' + e.type); 
       console.log('active frame', fotorama.activeFrame); 
       console.log('additional data', extra); 
      } 
     ) 
     // Initialize fotorama manually 
     .fotorama(); 
    });