带视觉差和子幻灯片特效的jQuery幻灯片插件 |幻灯片和轮播图|下载

简要教程

pignose.parallaxslider.js是一款带视觉差和子幻灯片特效的jQuery幻灯片插件。该幻灯片在每一个slide中都可以带一个子幻灯片，两重幻灯片在运行的过程中会产生不错的视觉差效果。

安装

可以通过bower或npm来安装pignose.parallaxslider.js插件。

bower install pg-parallaxslider
npm install pg-parallaxslider

使用方法

在页面中引入jquery(建议大于jquery1.11.x)、jquery.easing.js、pignose.parallaxslider.min.js和pignose.parallaxslider.min.css文件。

HTML结构

该幻灯片的基本HTML结构如下：

初始化插件

在页面DOM元素加载完毕之后，可以通过pignoseParallaxSlider()方法来初始化该幻灯片插件。

$(window).load(function() {
    $('#visual').pignoseParallaxSlider({
        play    : '.btn-play',
        pause   : '.btn-pause',
        next    : '.btn-next',
        prev    : '.btn-prev'
    });
});

配置参数

该幻灯片可用的配置参数有：

参数	名称	默认值	描述
speed	number	1200	幻灯片的动画速度，单位毫秒
interval	number	3000	幻灯片播放的间隔时间，单位毫秒
direction	string	right	幻灯片动画的方向
diffTime	number	300	主幻灯片和子幻灯片的视觉差时间，单位毫秒
controlAnim	boolean	true	如果该参数设置为false，插件会忽略动画队列的状态
pagination	boolean	true	是否显示分页圆点按钮
auto	boolean	true	是否自动开始播放幻灯片
isLocal	boolean	true	该属性设置控制按钮（播放、暂停、next、prev）是否属于当前的容器
play	jQuery object	null	播放按钮
pause	jQuery object	null	暂停按钮
next	jQuery object	null	next按钮
prev	jQuery object	null	prev按钮
afterMove	callback	null	幻灯片移动之后的回调函数