0

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;
}
4

1 に答える 1

0

何度も試した後、スクリプトをカスタマイズして、スライドショーに再生と一時停止の機能を追加しました。

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;
    });
});
于 2016-11-08T07:21:49.627 に答える