2012-03-02 63 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