switchPage.js是一款小巧的jQuery全屏滚动翻页插件。通过它可以快速创建水平或垂直的全屏滚动翻页效果。该插件支持使用鼠标或键盘来进行翻页。它的特点还有:
使该插件需要在页面中引入jquery和switchPage.js文件。
<script src="js/jquery.min.js"></script> <script src="js/switchPage.js"></script>
该全屏翻页滚动效果使用嵌套的HTML结构。
<div id="container"> <div class="section active"> Section One </div> <div class="section"> Section Two </div> <div class="section" id="section2"> Section Three </div> </div>
为每一个分段页面设置100%的高度和宽度。
* { padding: 0; margin: 0; } html, body { height: 100%; overflow: hidden; } #container, .section { height: 100%; position: relative; }
在页面DOM元素加载完毕之后,可以通过switchPage()
方法来初始化该全屏翻页滚动插件。
$(function(){ $("#container").switchPage({ // 配置参数 }); });
bespoke-fx幻灯片插件的配置参数如下:
'container'
:顶级容器。默认值为'#container'
。
'sections'
:分段容器。默认值为'.section'
。
'easing'
:动画过渡效果,默认值为'ease'
,可用值有:ease-in,ease-out,ease,linear。
'duration'
:动画的持续时间。默认值为1000毫秒。
'pagination'
:是否显示圆点导航按钮,默认为true。
'loop'
:是否支持无限循环,默认值为false。
'keyboard'
:是否支持键盘控制,默认值为true。
'direction'
:页面滚动的方向,默认值为'vertical'
,可用值有:vertical 或 horizontal。
'onpageSwitch'
:回调函数。默认为function(pagenum) {}
。