switchPage.js-简单的jQuery全屏滚动翻页插件

onepage 翻页 全屏滚动 2016-05-21

控件介绍
switchPage.js是一款小巧的jQuery全屏滚动翻页插件。通过它可以快速创建水平或垂直的全屏滚动翻页效果。该插件支持使用鼠标或键盘来进行翻页。
浏览器兼容

支持IE9+

演示下载 2231
使用方法

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

使用方法

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

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

该全屏翻页滚动效果使用嵌套的HTML结构。

1
2
3
4
5
6
7
8
9
10
11
<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%的高度和宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
* {
  padding: 0;
  margin: 0;
}
 
html, body {
  height: 100%;
  overflow: hidden;
}
 
#container, .section {
  height: 100%;
  position: relative;
}                 
初始化插件

在页面DOM元素加载完毕之后,可以通过switchPage()方法来初始化该全屏翻页滚动插件。

1
2
3
4
5
$(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) {}

本文转载请注明出处:http://www.zhuiye.com/detail_176.html
评论区
  • 还没有评论,快来抢沙发吧!