带视觉差和子幻灯片特效的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文件。

<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'
    });
});                  
                

配置参数

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

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