Отображение / скрытие div на основе обновления времени jPlayer - PullRequest
Новая
       3

Отображение / скрытие div на основе обновления времени jPlayer

1 голос
/ 02 марта 2012

Я создаю слайд-презентацию со звуком, используя jPlayer. Я хочу, чтобы строки текста появлялись в зависимости от текущего времени. Каждая строка завернута в div, скрыта и задана классом. Я добавил и удалил атрибут в 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>

Я подошел довольно близко, и все слайды появляются через 1 секунду, исчезают через 3 секунды, но мне нужно только первое деление, чтобы прийти, затем перейти к следующему делу и это время входа / выхода. Кто-нибудь может помочь?

Спасибо, S

1 Ответ

0 голосов
/ 02 марта 2012

Этот скрипт может вам немного помочь: 

<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>
...