2012-03-02 9 views
1

jPlayerを使用してオーディオ付きスライドプレゼンテーションを作成しています。現在の時間に基づいてテキストの行を表示します。それぞれの行はdivで囲まれ、隠され、クラスが与えられます。私はdivにattrを追加しました。ここで私が持っているコードは、これまでのところです:jPlayer時間の更新に基づいてdivを表示/非表示

<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に移動して、それはin/out時間です。誰も助けることができますか?

おかげで、このスクリプトはあなたに少し役立つかもしれない

答えて

0

S:

<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

関連する問題