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文件。

<link rel="stylesheet" href="dist/css/pignose.parallaxslider.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="dist/js/pignose.parallaxslider.min.js"></script>               
                
HTML结构

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

<div id="visual">
    <div class="slide-visual">
        <!-- 幻灯片区域 (1000 x 424) -->
        <ul class="slide-group">
            <li><img src="assets/img/visual_slide01.jpg" alt="slider image" /></li>
            <li><img src="assets/img/visual_slide02.jpg" alt="slider image" /></li>
            <li><img src="assets/img/visual_slide03.jpg" alt="slider image" /></li>
            <li><img src="assets/img/visual_slide04.jpg" alt="slider image" /></li>
            <li><img src="assets/img/visual_slide05.jpg" alt="slider image" /></li>
            <li><img src="assets/img/visual_slide06.jpg" alt="slider image" /></li>
        </ul>

        <!-- 子幻灯片区域 (316 x 328) -->
        <div class="script-wrap">
            <ul class="script-group">
                <li><div class="inner-script"><img src="1.jpg" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="2.jpg" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="3.jpg" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="4.jpg" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="5.jpg" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="6.jpg" alt="thumbnail slider image" /></div></li>
            </ul>
            <div class="slide-controller">
                <a href="#" class="btn-prev"><img src="assets/img/btn_prev.png" alt="prev slide" /></a>
                <a href="#" class="btn-play"><img src="assets/img/btn_play.png" alt="start slide" /></a>
                <a href="#" class="btn-pause"><img src="assets/img/btn_pause.png" alt="pause slide" /></a>
                <a href="#" class="btn-next"><img src="assets/img/btn_next.png" alt="next slide" /></a>
            </div>
        </div>
    </div>
</div>                  
                
初始化插件

在页面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 幻灯片移动之后的回调函数

PIGNOSE-ParallaxSlider幻灯片的github地址为:https://github.com/KennethanCeyer/PIGNOSE-ParallaxSlider