Question

我创建了这个小提琴来展示它：http://jsfiddle.net/vw425/3/

该脚本执行它应该执行的操作，只是它会经常触发$('.bx-pager-link').eq(current_index).click()和mark_current()函数。你可以看到，如果你已经打开了firebug控制台。所以它有效，但它仍然是一个糟糕的脚本，我想改进它。那么如何解析json对象并比较时间码而不是一直触发这些函数呢？可能有任何提示吗？

这是代码：的 HTML：

<div id="wrapper">
<div id="pdf_presentation">
                <div id="slider">
                    <ul class="bxslider">
                                <li class="12302"><img src="http://www.projectorcentral.com/images/articles/4-3%20Bristlecone%20Pines.jpg" alt="page 0" /></li>
        <li class="12302"><img src="http://img3.wikia.nocookie.net/__cb20060423235201/tovid/images/0/00/4_3_grid.jpg" alt="page 1" /></li>
        <li class="12302"><img src="http://www.freecomputerdesktopwallpaper.com/new_wallpaper/5_4_3_2_1_Happy_New_Year_freecomputerdesktopwallpaper_p.jpg" alt="page 2" /></li>
        <li class="12302"><img src="http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/image/tests/images/imageHoriz.jpg" alt="page 3" /></li>
        <li class="12302"><img src="http://4.bp.blogspot.com/-cVEz-BBU5Mw/U8uLaEKhdCI/AAAAAAAAJxQ/ZG06K9VPj9A/s1600/P1130206.JPG" alt="page 4" /></li>


                    </ul>
                <div id="custom_pager">
                    <ul id="custom_pager_list">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>

                    </ul>
                </div>
                </div>

            </div>
            <div id="video_wrapper">
                <video preload="none" id="movie" controls>
                    <source id="mp4" type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
                    <source id="webm" type="video/ogg" src="http://www.w3schools.com/html/mov_bbb.ogg"></source>
                </video>
            </div>
</div>

CSS：

*{
    padding: 0;
    margin: 0;
}

body{
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 12px;
}

#wrapper{
    width: 980px;                
    margin: 0 auto;
    margin-top: 20px;
    box-shadow: 0 0 10px #ccc;
}

#slider{
    width: 400px;
    height: 300px;
    float: left;
    margin-left: 10px;
}

#video_wrapper{
    float: right;
    margin-right: 10px;

}

#video_wrapper video{
    width: 540px;
    height: 308px;
}

.bx-pager{
    display: none;
}

#custom_pager{
    float: left;
    width: 400px;                
}

#custom_pager li{
    float: left;
    list-style-type: none;
    cursor: pointer;
    padding: 0 3px;
}

#custom_pager li:hover {
    font-weight: bold;
}

.bx-wrapper{
    margin-bottom: 0 !important;
}

.current_slide{
    font-weight: bold;
}

的Javascript / jQuery的：

var timecodes=[{"start":"00:00:00:00","end":"00:00:03:12"},{"start":"00:00:03:12","end":"00:00:04:00"},{"start":"00:00:04:00","end":"00:00:06:00"},{"start":"00:00:06:00","end":"00:00:09:55"},{"start":"00:00:09:55","end":"00:00:11:00"}];


$('#custom_pager_list li').eq(0).addClass('current_slide');

$('.bxslider').bxSlider({
    mode: 'fade',
    infiniteLoop: false,
    hideControlOnEnd: true,
    keyboardEnabled: true,
    useCSS: false,
    controls: false
});
$("#movie").on("timeupdate", function (event) {                    
    var current_index;
    for (var i = 0; i < timecodes.length; i++) {
        var start_as_array = timecodes[i].start.split(':');
        var end_as_array = timecodes[i].end.split(':');
        var start_in_seconds = (parseInt(start_as_array[0]) * 3600 + parseInt(start_as_array[1]) * 60 + parseInt(start_as_array[2])) + "." + start_as_array[3];
        var end_in_seconds = (parseInt(end_as_array[0]) * 3600 + parseInt(end_as_array[1]) * 60 + parseInt(end_as_array[2])) + "." + end_as_array[3];
        if (this.currentTime > start_in_seconds && this.currentTime < end_in_seconds) {

            current_index = i;                          
        }
    }
    $('.bx-pager-link').eq(current_index).click();
    mark_current();
});

$('#custom_pager_list li').click(function () {
    if ($('#movie').get(0).paused) {
        $("#movie").get(0).play();                        
    }
    else {
        var slide = $(this).index();
        var start_as_array = timecodes[slide].start.split(':');
        var start_in_seconds = (parseInt(start_as_array[0]) * 3600 + parseInt(start_as_array[1]) * 60 + parseInt(start_as_array[2])) + "." + start_as_array[3];
        $("#movie").get(0).currentTime = start_in_seconds;
        $("#movie").get(0).play();
    }
});

function mark_current() {
    var active_index = $('.active').parent().index();
    console.log(active_index);
    $('.current_slide').removeClass('current_slide');                    
    $('#custom_pager_list li').eq(active_index).addClass('current_slide');
}

Answer 1

这里我向JSON对象添加了一个done属性，并在条件中添加了一个检查。还移动了条件中的click和mark_current函数调用。

演示：http://jsfiddle.net/robschmuecker/vw425/4/

var timecodes = [{
    "start": "00:00:00:00",
        "end": "00:00:03:12",
        "done": false
}, {
    "start": "00:00:03:12",
        "end": "00:00:04:00",
        "done": false
}, {
    "start": "00:00:04:00",
        "end": "00:00:06:00",
        "done": false
}, {
    "start": "00:00:06:00",
        "end": "00:00:09:55",
        "done": false
}, {
    "start": "00:00:09:55",
        "end": "00:00:11:00",
        "done": false
}];


$('#custom_pager_list li').eq(0).addClass('current_slide');

$('.bxslider').bxSlider({
    mode: 'fade',
    infiniteLoop: false,
    hideControlOnEnd: true,
    keyboardEnabled: true,
    useCSS: false,
    controls: false
});
$("#movie").on("timeupdate", function (event) {
    var current_index;
    for (var i = 0; i < timecodes.length; i++) {
        var start_as_array = timecodes[i].start.split(':');
        var end_as_array = timecodes[i].end.split(':');
        var start_in_seconds = (parseInt(start_as_array[0]) * 3600 + parseInt(start_as_array[1]) * 60 + parseInt(start_as_array[2])) + "." + start_as_array[3];
        var end_in_seconds = (parseInt(end_as_array[0]) * 3600 + parseInt(end_as_array[1]) * 60 + parseInt(end_as_array[2])) + "." + end_as_array[3];
        if (this.currentTime > start_in_seconds && this.currentTime < end_in_seconds && timecodes[i].done != true) {
            timecodes[i].done = true;
            current_index = i;

            $('.bx-pager-link').eq(current_index).click();
            mark_current();
        }
    }
});

$('#custom_pager_list li').click(function () {
    if ($('#movie').get(0).paused) {
        $("#movie").get(0).play();
    } else {
        var slide = $(this).index();
        var start_as_array = timecodes[slide].start.split(':');
        var start_in_seconds = (parseInt(start_as_array[0]) * 3600 + parseInt(start_as_array[1]) * 60 + parseInt(start_as_array[2])) + "." + start_as_array[3];
        $("#movie").get(0).currentTime = start_in_seconds;
        $("#movie").get(0).play();
    }
});

function mark_current() {
    var active_index = $('.active').parent().index();
    console.log(active_index);
    $('.current_slide').removeClass('current_slide');
    $('#custom_pager_list li').eq(active_index).addClass('current_slide');
}

如何只在循环中执行一次函数？

1 个答案: