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

xiong

在线演示  本地下载

今天我们介绍一个漂亮的jQuery翻页效果插件 - bookblock，使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢！
这个插件依赖于jQuery++，这个类库是一个jQuery的扩展类库，这里使用了它的swipe事件。
HTML代码
主要html代码如下，生成需要展示的图片内容：

<div id="bb-bookblock" class="bb-bookblock">
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image01"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image02"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image03"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image04"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image05"/></a>
       </div>
       <div class="bb-item">
              <a href="http://upload.chinaz.com//" alt="image05"/></a>
       </div>
</div>

Javacript代码

$（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; }

希望大家喜欢这个插件，如果你有任何问题，请给我们留言，谢谢！
来源：帮助你生成翻页效果的jQuery插件 - bookblock