switchPage.js是一款小巧的jQuery全屏滚动翻页插件。通过它可以快速创建水平或垂直的全屏滚动翻页效果。该插件支持使用鼠标或键盘来进行翻页。它的特点还有：

  • 支持水平和垂直翻页。
  • 页面无限循环，滚动到最后一夜后会跳转会第一页。
  • 自动生成圆点导航按钮。
  • 可以自定义页面的过渡动画效果。

使用方法

使该插件需要在页面中引入jquery和switchPage.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/switchPage.js"></script>
HTML结构

该全屏翻页滚动效果使用嵌套的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>
CSS样式

为每一个分段页面设置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) {}。