jQuery和CSS3炫酷响应式滑动翻页特效插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

FKPageTransitions是一款效果非常炫酷的jQuery和CSS3响应式滑动翻页特效插件。该滑动翻页插件可以支持37种不同的翻页效果，文件体积小，支持多种设备，是制作页面切换效果的不错选择。它的特点有：

完全适应任何设备屏幕
水平，垂直，和淡入等37种翻页效果
可以包含图像，视频，HTML内容，或各种动画元素。
充分回调API和公共方法
小体积，自定义样式，简单的使用代码
支持浏览器Firefox，Safari，Chrome，iOS，Android，IE9 +
丰富的配置选项

使用方法

使用这个滑动翻页插件要先引入jQuery库。其次，引入fkpagetransitions.css和fkpagetransitions.min.js文件。

<!-- jQuery library -->
<script src="jquery/jquery.min.js"></script>
<!-- FKPageTransitions Javascript file -->
<script src="/js/fkpagetransitions.min.js"></script>
<!-- FKPageTransitions CSS file -->
<link href="/css/fkpagetransitions.css" rel="stylesheet" />

HTML结构

创建一个<ul class="test"> 元素, 一个<li>为一个页面。页面中可以包含图像，视频，或任何其他HTML内容。

<ul class="test">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

初始化插件

在页面加载完毕之后，可以使用.FKPageTransitions()来初始化该页面切换插件。

$(document).ready(function(){
  $('.test').FKPageTransitions();
});

配置参数

mode：页面切换动画的过渡效果。默认值为0，可选值[0-37]。单数为适合左右操作，双数适合上下操作。其中0、31、32、34、36、37可左右上下通用。
- 0：淡入翻页(适合左右和上下操作)
- 1、2：简单位移翻页
- 3、4：新页位移入场旧页变暗位置不动
- 5、6：新旧页同时位移旧页变暗
- 7、8：新页位移入场旧页浮动位移
- 9、10：新页位移入场旧页变小
- 11、12：新页位移入场旧页揭下和9、10差不多
- 13、14：旧页位移新页放大入场
- 15、16：新页位移入场旧页顶下去
- 17、18：新旧页同时面对面翻页入场和出场
- 19、20：新旧页像盒子一样转动
- 21、22：新旧页像盒子一样展开
- 23、24：新旧页像在盒子里一样转动
- 25、26：新旧页像盒子一样转动视角由小大变小再由小变大
- 27、28：新旧页立体间飞行位移
- 29、30：新页缩小和旧变大页翻转交错入场
- 31：新页和旧页一起淡入效果同时变小(适合左右和上下操作)
- 32：新页和旧页一起淡入效果同时变大(适合左右和上下操作)
- 33：新旧页同时面对面翻页入场和出场周时变小与24差不多(适合左右)
- 34:旧页固定顶角再掉落新页放大入场(适合左右和上下操作)
- 35：旧页缩小移出新页移出放大入场(适合左右)
- 36：新页缩小旧页变大交错入场(适合左右和上下操作)
- 37：新页缩小和旧变大页旋转交错入场(适合左右和上下操作)
speed：动画过渡时间，单位毫秒。默认值：null，类型:integer。
startSlide：启动页面的索引（从零开始）。默认值：null，类型:integer。
slideSelector：滑动元素的选择器，如'div.slide'。默认情况下，bxslider将使用滑块元素的所有直接的子元素。默认值：' '，类型:jQuery selector。
infiniteLoop：如果为 true,单击“下一步”在最后一张幻灯片将过渡到第一张幻灯片，反之亦然。默认值：true，类型:boolean。
easing：过程中使用的转换 "easing" 使用CSS转换, 值请参考 transition-timing-function 的参数说明。默认值：null。
slideZIndex：初始z-index值。默认值：50，类型:integer。
responsive：启用或禁用自动调整滑块。如果你需要使用固定宽度的滑块。默认值：true，类型:boolean。
wrapperClass：翻页框架类名。防止有样式与FKPageTransitions冲突。默认值：'fk-page-wrapper'，类型:string。
mouseWheel：是否支持滚轮。默认值：true，类型:boolean。
wheelThreshold：鼠标的灵敏度阀值。默认值：2，类型:integer。
swipeThreshold：触摸灵敏度阀值。默认值：50，类型:integer。
preventDefaultSwipeX：如果true，触摸屏沿x轴为手指操作(如果为false并preventDefaultSwipeY也为false那么不响应touch事件)。默认值：true，类型:boolean。
preventDefaultSwipeY：如果true，触摸屏沿y轴为手指操作(如果为false并preventDefaultSwipeY也为false那么不响应touch事件)
pagerunstat：如果true，在翻页动画进行时禁止页面内元素动画渲染。默认值：true，类型:boolean。

回调方法

onSliderLoad：加载完成时回调。
- default: function(){}
- options: function(currentIndex){ // 写你的代码 }
- 参数:currentindex：当前幻灯片的元素的索引
onSliderResize：窗口发生变化时回调,前提[responsive=true]。
- default: function(){}
- options: function(currentIndex){ // 写你的代码 }
- 参数:currentindex：当前幻灯片的元素的索引
onSlideBefore：在每动画过渡开始前回调。
- default: function(){}
- options: function(newIndex,oldIndex,newElement,oldElement){ // 写你的代码 }
- 参数:currentindex：当前幻灯片的元素的索引；newIndex:当前页码；newElement:当前的jQuery元素；oldElement:之前的jQuery元素
onSlideAfter：在每动画过渡结束后回调。
- default: function(){}
- options: function(newIndex,oldIndex,newElement,oldElement){ // 写你的代码 }
- 参数:currentindex：当前幻灯片的元素的索引；newIndex:当前页码；newElement:当前的jQuery元素；oldElement:之前的jQuery元素
onSlideNext：执行下一页时回调。
- default: function(){}
- options: function(newIndex,oldIndex,newElement,oldElement){ // 写你的代码 }
- 参数:currentindex：当前幻灯片的元素的索引；newIndex:当前页码；newElement:当前的jQuery元素；oldElement:之前的jQuery元素
onSlidePrev：执行上一页时回调。
- default: function(){}
- options: function(newIndex,oldIndex,newElement,oldElement){ // 写你的代码 }
- 参数:currentindex：当前幻灯片的元素的索引；newIndex:当前页码；newElement:当前的jQuery元素；oldElement:之前的jQuery元素