2012-03-02 66 views
1

我正在使用jPlayer構建帶音頻的幻燈片演示文稿。我想根據當前時間顯示文本行。每行都被封裝在一個div中,隱藏並給定一個類。我已經添加了attr和div。這裏是我的代碼至今:基於jPlayer時間更新顯示/隱藏divs

<script type="text/javascript"> 
$(function() { 
$("#jquery_jplayer_1").jPlayer({ 
    ready: function() { 
     $(this).jPlayer("setMedia", { 
      mp3: "media/audio.mp3", 
      oga: "media/audio.ogg" 
     }).jPlayer("play"); 
    }, 
    supplied: "mp3, oga", 
    swfPath: "js" 
}); 

$("#jquery_jplayer_1").bind($.jPlayer.event.timeupdate, function(event) { 
    currentTime = Math.floor(event.jPlayer.status.currentTime) 

    var slidesdiv = $('#slides'); 

    // Hides all slides to start 
    $(slidesdiv).children().addClass('starthidden'); 

    // stores the number of slides 
    var numslides = $(slidesdiv).children().length; 

    // adds slidexx class to each div 
    $('#slides > div').addClass(function() { 
     return 'slide' + $(this).index(); 
    }); 

    if (currentTime >= $('#slides > div').attr('in') && currentTime < $('#slides > div').attr('out')) { 
     $('#slides > div').fadeIn("fast"); 
    } else { 
     $('#slides > div').fadeOut("fast"); 
    } 
}); 
}); 
</script> 

和HTML:

<div id="slides"> 
    <!-- Slide 1 --> 
    <div in="1" out="3"><h2>Implications</h2></div> 
    <div in="5" out="8">Implications have the form</div> 
      etc.. 
</div> 

我已經得到相當接近,整個#slides出現在1秒,3秒處消失,但我需要只有第一個div纔會去,然後轉到下一個div,並且它是進/出時間。誰能幫忙?

感謝, 小號

回答

0

此腳本可能你有點幫助:

<script type="text/javascript"> 
    $(function() { 
     $("#slides").find("div").hide(); 

     var currentInOut = 0; 
     var code = setInterval(function() { 
      var currDiv = Number() == currentInOut; 
      $.each($("#slides").find("div"), function() { 
       if (Number($(this).attr("in")) <= currentInOut && Number($(this).attr("out")) >= currentInOut) { 
        $(this).show(); 
        $(this).siblings().hide(); 
       } 
      }); 
      currentInOut += 1; 
      if (currentInOut >= Number($("#slides").find("div").last().attr("out"))) { 
       clearInterval(code); 
      } 
     }, 1000); 
    }); 

</script> 
+0

感謝Ulhas Tuscano。我能夠從你的代碼中學到足夠的東西來解決它!感謝你及時的答覆! – Stu 2012-03-02 19:09:48