Question

如何在bookblock.js中创建播放和暂停功能。

下面是我的js函数，单击播放/暂停按钮时会调用该函数。我无法使用此功能暂停（并再次回收）幻灯片。这有什么不妥。

function playPauseSlide(obj) {        
    if (isPlay) {
        $(obj).find('i').removeClass('glyphicon-pause').addClass('glyphicon-play');            
        $('#bb-bookblock').bookblock({ autoplay: false });            
    } else {
        $(obj).find('i').removeClass('glyphicon-play').addClass('glyphicon-pause');
        $('#bb-bookblock').bookblock({ autoplay: true, interval: 1000 });            
    }
    isPlay = !isPlay;
}

Answer 1

经过大量尝试后，我终于通过自定义脚本在幻灯片放映中添加了播放和暂停功能。

<强> jquery.bookblock.js

_pauseSlideshow: function () {        
    if ( this.options.autoplay ) {
        clearTimeout( this.slideshow );           
                    }
},

//// public method: pause the slide show
pause: function () {          
    this._pauseSlideshow();
},

//// public method: play again the paused slide show
playAgain: function () {            
    this.options.autoplay = true;
    this._navigate('next', this.$currentItem);
    this._startSlideshow();
},

在我的视图脚本中

var config = {
    $bookBlock: $('#bb-bookblock'),
    $navNext: $('#nextPage'),
    $navPrev: $('#prevPage'),
    $navFirst: $('#bb-nav-first'),
    $navLast: $('#bb-nav-last'),
    $pause: $('#pause'),
    $playAgain: $('#playAgain'),
},

initEvents = function () {
    config.$pause.on('click touchstart', function () {
        config.$bookBlock.bookblock('pause');
        return false;
    });

    config.$playAgain.on('click touchstart', function () {
        config.$bookBlock.bookblock('playAgain');
        return false;
    });
});

在BookBlock.js中播放和暂停

1 个答案: