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

<div id="bb-bookblock" class="bb-bookblock">
 <div class="bb-item">
 <a href="http://www.gbin1.com"><img src="images/animals/a.jpg" alt="image01"/></a>
 </div>
 <div class="bb-item">
 <a href="http://www.gbin1.com"><img src="images/animals/b.jpg" alt="image02"/></a>
 </div>
 <div class="bb-item">
 <a href="http://www.gbin1.com"><img src="images/animals/c.jpg" alt="image03"/></a>
 </div>
 <div class="bb-item">
 <a href="http://www.gbin1.com"><img src="images/animals/d.jpg" alt="image04"/></a>
 </div>
 <div class="bb-item">
 <a href="http://www.gbin1.com"><img src="images/animals/e.jpg" alt="image05"/></a>
 </div>
 <div class="bb-item">
 <a href="http://www.gbin1.com"><img src="images/animals/f.jpg" alt="image05"/></a>
 </div>
</div>

$(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();

});

// speed for the flip transition in ms.

　　speed : 1000,

　　// easing for the flip transition.

　　easing : 'ease-in-out',

　　// if set to true, both the flipping page and the sides will have an overlay to simulate shadows

　　shadows : true,

　　// opacity value for the "shadow" on both sides (when the flipping page is over it).

　　// value : 0.1 - 1

　　shadowSides : 0.2,

　　// opacity value for the "shadow" on the flipping page (while it is flipping).

　　// value : 0.1 - 1

　　shadowFlip : 0.1,

　　// perspective value

　　perspective : 1300,

　　// if we should show the first item after reaching the end.

　　circular : false,

　　// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.

　　nextEl : '',

　　// if we want to specify a selector that triggers the prev() function.

　　prevEl : '',

　　// callback after the flip transition.

　　// page is the current item's index.

　　// isLimit is true if the current page is the last one (or the first one).

　　onEndFlip : function( page, isLimit ) { return false; },

　　// callback before the flip transition.

　　// page is the current item's index.

　　onBeforeFlip: function( page ) { return false; }