使用bookblock.js時獲取當前幻燈片編號？

Question

我正在爲兒童在線讀書，我正在使用bookblock.js翻轉動畫。另外即時通訊使用popcorn.js提供當前幻燈片中的音頻，並在音頻播放時突出顯示單詞。我的問題是（也許它是一個愚蠢的問題 - 但即時通訊在JavaScript世界有點新），我不知道如何獲得當前幻燈片，所以我可以自動播放相應的音頻文件。我設法在每張幻燈片上附加一個音頻文件，並在點擊自定義播放按鈕時播放它，並在點擊自定義暫停按鈕時暫停它，但現在我還想在點擊下一個按鈕時自動播放相應的音頻文件，以便用戶不要每次他在新的幻燈片上都不需要按下播放。

這是主要的div，我有兩個div（bb-custom-side），其中一個（右）我只有一個圖像，而在左邊的bb-custom-side我有2個按鈕（play /暫停，他們應該工作），我有一個圖像（背景）和一個文本。

<div class="bb-item" id="check3"> 
        <div class="bb-custom-side"> 
         <a class="play" id="play1" onclick="this.firstChild.play()"><audio class="audio" id="first_page" src="audio/FirstPage.mp3" preload="auto"/></a> 
         <a class="pause" id="pause1" onclick="document.getElementById('first_page').pause()"></a> 
         <img class="firstL" src="images/2L.png" /> 
         <div class="textCont1" id="t1"> 
           <span id="w1-1" class="word" data-start="0.40" >Еден</span> 
           <span id="w1-2" class="word" data-start="0.90">облачен</span></br> 
           <span id="w1-3" class="word" data-start="1.40">ден</span> 
           , 
           <span id="w1-4" class="word" data-start="2.15">Петар</span> 
           <span id="w1-5" class="word" data-start="2.55">и</span> 
           <span id="w1-6" class="word" data-start="2.70">неговата</span></br> 
           <span id="w1-7" class="word" data-start="7.0">мајка</span> 
           <span id="w1-8" class="word" data-start="8.0">отидоа</span> 
           <span id="w1-9" class="word" data-start="9.0">во</span> 
           <span id="w1-10" class="word" data-start="10.0">паркот</span> 
           .</br> 
           <span id="w1-11" class="word" data-start="11.0">Додека</span> 
           <span id="w1-12" class="word" data-start="12.0">мајка</span> 
           <span id="w1-13" class="word" data-start="13.0">му</span> 
           <span id="w1-14" class="word" data-start="14.0">плетеше</span></br> 
           <span id="w1-15" class="word" data-start="15.0">џемперче</span> 
           , 
           <span id="w1-16" class="word" data-start="16.0">Петар</span> 
           <span id="w1-17" class="word" data-start="17.0">се</span></br> 
           <span id="w1-18" class="word" data-start="18.0">лулаше</span> 
           <span id="w1-19" class="word" data-start="19.0">на</span> 
           <span id="w1-20" class="word" data-start="20.0">лулашкитe</span> 
           .</br> 
           <span id="w1-21" class="word" data-start="21.0">Таа</span> 
           <span id="w1-22" class="word" data-start="22.0">наскоро</span> 
           <span id="w1-23" class="word" data-start="23.0">ќе</span> 
           <span id="w1-24" class="word" data-start="24.0">роди</span> 
           <span id="w1-25" class="word" data-start="25.0">бебе</span> 
           , 
           <span id="w1-26" class="word" data-start="26.0">а</span></br> 
           <span id="w1-27" class="word" data-start="27.0">Петар</span> 
           <span id="w1-28" class="word" data-start="28.0">ќе</span> 
           <span id="w1-29" class="word" data-start="29.0">добие</span> 
           <span id="w1-30" class="word" data-start="30.0">братче</span> 
           <span id="w1-31" class="word" data-start="31.0">или</span></br> 
           <span id="w1-32" class="word" data-start="32.0">сестричка</span> 
           .</br> 
         </div> 
        </div> 
        <div class="bb-custom-side"> 
         <img class="firstR" src="images/2R.png" /> 
        </div> 
       </div> 

現在腳本的一部分，其中i控制下一個/上/跳到第一/跳轉到使用bookblock.js插件最後一張幻燈片如下：

<script> 

     var Page = (function() { 

      var config = { 
        $bookBlock : $('#bb-bookblock'), 
        $navNext : $('#bb-nav-next'), 
        $navPrev : $('#bb-nav-prev'), 
        $navFirst : $('#bb-nav-first'), 
        $navLast : $('#bb-nav-last'), 
       }, 

       init = function() { 
        config.$bookBlock.bookblock({ 
         speed : 1000, 
         shadowSides : 0.8, 
         shadowFlip : 0.4 
        }); 
        initEvents(); 
       }, 
       initEvents = function() { 

        var $slides = config.$bookBlock.children(); 

        // add navigation events 

        config.$navNext.on('click touchstart', function() { 
         config.$bookBlock.bookblock('next'); 
         ///////////////////////////////////////////////////////////////// 
         var allaudio = document.getElementsByClassName('audio'); 
         for(var i=0; i<allaudio.length; i++) 
          { 
           allaudio[i].pause(); 
           allaudio[i].src = allaudio[i].src; 
          } 
         ///////////////////////////////////////////////////////////////// 
         return false; 
        }); 

        config.$navPrev.on('click touchstart', function() { 
         config.$bookBlock.bookblock('prev'); 
         ///////////////////////////////////////////////////////////////// 
         var allaudio = document.getElementsByClassName('audio'); 
         for(var i=0; i<allaudio.length; i++) 
          { 
           allaudio[i].pause(); 
           allaudio[i].src = allaudio[i].src; 
          } 
         //////////////////////////////////////////////////////////////// 
         return false; 
        }); 

        config.$navFirst.on('click touchstart', function() { 
         config.$bookBlock.bookblock('first'); 
         ///////////////////////////////////////////////////////////////// 
         var allaudio = document.getElementsByClassName('audio'); 
         for(var i=0; i<allaudio.length; i++) 
          { 
           allaudio[i].pause(); 
           allaudio[i].src = allaudio[i].src; 
          } 
         ///////////////////////////////////////////////////////////////// 
         return false; 
        }); 

        config.$navLast.on('click touchstart', function() { 
         config.$bookBlock.bookblock('last'); 
         ///////////////////////////////////////////////////////////////// 
         var allaudio = document.getElementsByClassName('audio'); 
         for(var i=0; i<allaudio.length; i++) 
          { 
           allaudio[i].pause(); 
           allaudio[i].src = allaudio[i].src; 
          } 
         ///////////////////////////////////////////////////////////////// 
         return false; 
        }); 

        // add swipe events 
        $slides.on({ 
         'swipeleft' : function(event) { 
          config.$bookBlock.bookblock('next'); 
          ///////////////////////////////////////////////////////////////// 
          var allaudio = document.getElementsByClassName('audio'); 
          for(var i=0; i<allaudio.length; i++) 
          { 
           allaudio[i].pause(); 
           allaudio[i].src = allaudio[i].src; 
          } 
          ///////////////////////////////////////////////////////////////// 
          return false; 
         }, 
         'swiperight' : function(event) { 
          config.$bookBlock.bookblock('prev'); 
          ///////////////////////////////////////////////////////////////// 
          var allaudio = document.getElementsByClassName('audio'); 
          for(var i=0; i<allaudio.length; i++) 
          { 
           allaudio[i].pause(); 
           allaudio[i].src = allaudio[i].src; 
          } 
          ///////////////////////////////////////////////////////////////// 
          return false; 
         } 
        }); 

        // add keyboard events 
        $(document).keydown(function(e) { 
         var keyCode = e.keyCode || e.which, 
          arrow = { 
           left : 37, 
           up : 38, 
           right : 39, 
           down : 40 
          }; 

         switch (keyCode) { 
          case arrow.left: 
           config.$bookBlock.bookblock('prev'); 
           //////////////////////////////////////////////////////////////// 
           var allaudio = document.getElementsByClassName('audio'); 
           for(var i=0; i<allaudio.length; i++) 
           { 
            allaudio[i].pause(); 
            allaudio[i].src = allaudio[i].src; 
           } 
           //////////////////////////////////////////////////////////////// 
           break; 
          case arrow.right: 
           config.$bookBlock.bookblock('next'); 
           //////////////////////////////////////////////////////////////// 
           var allaudio = document.getElementsByClassName('audio'); 
           for(var i=0; i<allaudio.length; i++) 
           { 
            allaudio[i].pause(); 
            allaudio[i].src = allaudio[i].src; 
           } 
           //////////////////////////////////////////////////////////////// 
           break; 
         } 
        }); 
       }; 

       return { init : init }; 

     })(); 
    </script> 
    <script> 
      Page.init(); 
    </script> 

哪裏我管理的一部分同步音頻與當前幻燈片文本如下（下面的代碼是一個幻燈片只有在這種情況下，包含使用id =「first_page」音頻的DIV：

var pop = Popcorn("#first_page"); 

     var wordTimes = { 
      "w1-1": { start: 0.55, end: 0.91 }, 
      "w1-2": { start: 0.90, end: 1.55}, 
      "w1-3": { start: 1.45, end: 2.25 }, 
      "w1-4": { start: 2.00, end: 2.65 }, 
      "w1-5": { start: 2.6, end: 2.80 }, 
      "w1-6": { start: 2.72, end: 3.3 }, 
      "w1-7": { start: 3.30, end: 3.77 }, 
      "w1-8": { start: 3.77, end: 4.1 }, 
      "w1-9": { start: 4.10, end: 4.24 }, 
      "w1-10": { start: 4.24, end: 5.00 }, 
      "w1-11": { start: 5.40, end: 6.06 }, 
      "w1-12": { start: 6.06, end: 6.55 }, 
      "w1-13": { start: 6.1, end: 6.56 }, 
      "w1-14": { start: 6.56, end: 6.97 }, 
      "w1-15": { start: 6.95, end: 7.75 }, 
      "w1-16": { start: 8, end: 8.43 }, 
      "w1-17": { start: 8.40, end: 8.66 }, 
      "w1-18": { start: 8.60, end: 9.10 }, 
      "w1-19": { start: 9.00, end: 9.24}, 
      "w1-20": { start: 9.20, end: 10.11 }, 
      "w1-21": { start: 10.92, end: 11.25 }, 
      "w1-22": { start: 11.20, end: 11.70 }, 
      "w1-23": { start: 11.60, end: 11.80 }, 
      "w1-24": { start: 11.78, end: 12.15 }, 
      "w1-25": { start: 12.11, end: 12.50 }, 
      "w1-26": { start: 12.90, end: 13.20 }, 
      "w1-27": { start: 13.15, end: 13.65 }, 
      "w1-28": { start: 13.55, end: 13.75 }, 
      "w1-29": { start: 13.70, end: 14.10 }, 
      "w1-30": { start: 14.20, end: 14.65 }, 
      "w1-31": { start: 14.57, end: 14.85 }, 
      "w1-32": { start: 14.70, end: 15.50 } 
     }; 

     $.each(wordTimes, function(id, time) { 
      pop.footnote({ 
       start: time.start, 
       end: time.end, 
       text: '', 
       target: id, 
       effect: "applyclass", 
       applyclass: "selected" 
      }); 
     }); 

     pop.play(); 

     $('.word').click(function() { 
      var audio = $('#first_page'); 
      audio[0].currentTime = parseFloat($(this).data('start'), 10); 
      audio[0].play(); 
     }); 

，所以我不知道如果我provid編輯足夠的代碼信息，但總之我真的很想知道：有沒有辦法讓我從bookblock.js獲得當前幻燈片（因爲插件中有一個CURRENT變量，但我不知道如何得到它並檢查它的狀態）或其他任何地方，所以我可以寫一個if語句並自動播放正確的音頻... 我試圖聲明一個變量COUNTER，它在config。$ bookBlock.bookblock（'next'）時遞增並在配置時遞減。 $ bookBlock.bookblock（「下一頁」），並檢查其例如狀態幻燈片2：

if(counter == 2) { 
// use the popcorn script code with the appropriate audio } 

，但由於某種原因，將無法正常工作......

我也嘗試了類似的問題的解決方案，在聖地亞哥被討論ackOverflow像： How to check element's visibility via javascript? Get display status element effected by .slideToggle()? Check if element is visible on screen http://opensource.teamdf.com/visible/examples/demo-basic.html

，所以我可以檢查時，DIV中視播放音頻，但由於某種原因，不會工作要麼...

任何幫助將大大讚賞。

Answer 1

插件顯示頁翻頁結束時的回調。

onEndFlip : function(old, page, isLimit) { return false; }, 
    // callback before the flip transition 
    // page is the current item´s index 

打電話給你的音頻編碼裏面。頁面應該包含當前頁碼。

Page.init({ 
    onEndFlip : function(old, page, isLimit) { 
     //Your audio playing code goes here.. 
    } 
});