2016-10-25 41 views
0

如何在bookblock.js中創建播放和暫停功能。在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; 
} 

回答

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