Jquery 基于jPlayer时间更新显示/隐藏div

我正在使用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>

$（函数（）{
$（“#jquery_jplayer_1”）.jplayer（{
就绪：函数（）{
$（this）.jPlayer（“setMedia”{
mp3：“媒体/音频.mp3”，
oga：“媒体/音频.ogg”
}).jPlayer（“播放”）；
},
提供：“mp3，oga”，
swfPath:“js”
});
$（“#jquery_jplayer_1”）.bind（$.jplayer.event.timeupdate，函数（事件）{
currentTime=Math.floor（event.jPlayer.status.currentTime）
var slidesdiv=$（“#slides”）；
//隐藏要开始的所有幻灯片
$（slidesdiv.children（）.addClass（'starthidden'）；
//存储幻灯片的数量
var numslides=$（slidesdiv）.children（）.length；
//向每个div添加slidexx类
$（'#slides>div'）.addClass（函数（）{
返回'slide'+$（this.index（）；
});
如果（当前时间>=$（'#幻灯片>div'）.attr（'in'）和¤tTime<$（'#幻灯片>div'）.attr（'out'））{
$（“#幻灯片>div”）.fadeIn（“快速”）；
}否则{
$（'#slides>div'）。淡出（“快速”）；
}
});
});

以及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秒时消失，但我只需要第一个div来，然后转到下一个div，时间到了。有人能帮忙吗

谢谢，

---

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>

$（函数（）{
$（“#幻灯片”）.find（“div”）.hide（）；
var currentInOut=0；
var代码=设置间隔（函数（）{
var currDiv=Number（）=currentInOut；
$。每个（$（“#幻灯片”）。查找（“div”），函数（）{
if（Number（$（this.attr（“in”））=currentInOut）{
$（this.show（）；
$（this.sides（）.hide（）；
}
});
currentInOut+=1；
如果（currentInOut>=数字（$（“#幻灯片”）.find（“div”）.last（）.attr（“out”））{
清除间隔（代码）；
}
}, 1000);
});

谢谢Ulhas Tuscano。我从你的代码中学到了足够多的东西来理解它！谢谢你的快速回答！