jq html5 全屏滚动,jQuery全屏滚动插件

XSwitch是一款jQuery全屏滚动插件。XSwitch可以高度自定义，生成通过鼠标滚动全屏翻页的效果。

使用方法

在页面最后引入jquery和XSwitch.min.js文件。

HTML结构

基本的HTML结构如下。

CSS样式

然后添加一些基础的样式支持。

/*简单reset*/

* {

margin: 0;

padding: 0;

}

/*必须，关系到单个page能否全屏显示*/

html,

body {

height: 100%;

overflow: hidden;

}

#container,

.sections,

.section {

/*必须，兼容，在浏览器不支持transform属性时，通过改变top/left完成滑动动画*/

position: relative;

/*必须，关系到单个page能否全屏显示*/

height: 100%;

}

.section {

/*有背景图时必须，关系到背景图能否全屏显示*/

background-color: #000;

background-size: cover;

background-position: 50% 50%;

}

/*非必需，只是用来设置背景图，id不会被插件用到*/

#section0 {

background-image: url(img/img1.jpg);

}

#section1 {

background-image: url(img/img2.jpg);

}

#section2 {

background-image: url(img/img3.jpg);

}

#section3 {

background-image: url(img/img4.jpg);

}

/*以下样式用来设置slider样式，可自行修改*/

.pages {

position:fixed;

right: 10px;

top: 50%;

list-style: none;

}

.pages li {

width: 8px;

height: 8px;

border-radius: 50%;

background: #fff;

margin: 15px 0 0 7px;

}

.pages li.active {

margin-left: 0;

width: 14px;

height: 14px;

border: 4px solid #FFFFFF;

background: none;

}

初始化插件

有两种调用插件的方法：

方法一： 通过给div#container添加属性data-XSwitch调用，插件将会使用默认配置，如：

...

方法二 ：通过js调用，使用这种方法可设置参数。

$('#container').XSwitch({

direction: 'horizontal'

});

使用方法

XSwitch插件配置参数如下：

/*默认配置*/

{

selectors: {

sections: '.sections', //容器类名

section: '.section', //子容器类名，即每个单页

page: '.pages', //slider类名 插件会生成一个ul侧边栏

active: '.active' //被选中的slider下li的类名

},

index: 0, //起始页下标

easing: 'ease', //动画类型，支持transition所有类型

duration: 500, //动画执行时间 单位毫秒

loop: false, //是否支持循环滑动

pagination: true, //是否分页

keyboard: true, //是否支持键盘滚动事件

direction: 'vertical', //滑动方向 默认为垂直 设置为 horizontal 将水平滑动

callback: '' //滑动完成后的回调函数

}