帮助你生成翻页效果的jQuery插件 – bookblock

在线演示  本地下载

今天我们介绍一个漂亮的jQuery翻页效果插件 – bookblock，使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢！

这个插件依赖于 jQuery++，这个类库是一个jQuery的扩展类库，这里使用了它的swipe事件。

HTML代码

主要html代码如下，生成需要展示的图片内容：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Javacript代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

$(function() {   var Page = (function() {   var config = { $bookBlock: $( '#bb-bookblock' ), $navNext : $( '#bb-nav-next' ), $navPrev : $( '#bb-nav-prev' ), $navJump : $( '#bb-nav-jump' ), bb : $( '#bb-bookblock' ).bookblock( { speed : 800, shadowSides : 0.8, shadowFlip : 0.7 } ) }, init = function() {   initEvents();   }, initEvents = function() {   var $slides = config.$bookBlock.children(), totalSlides = $slides.length;   // add navigation events config.$navNext.on( 'click', function() {   config.bb.next(); return false;   } );   config.$navPrev.on( 'click', function() {   config.bb.prev(); return false;   } );   config.$navJump.on( 'click', function() {   config.bb.jump( totalSlides ); return false;   } );   // add swipe events $slides.on( {   'swipeleft' : function( event ) {   config.bb.next(); return false;   }, 'swiperight' : function( event ) {   config.bb.prev(); return false;   }   } );   };   return { init : init };   })();   Page.init();   });

希望大家喜欢这个插件，如果你有任何问题，请给我们留言，谢谢！

来源： 帮助你生成翻页效果的jQuery插件 – bookblock