幻灯片/轮播
视觉差内嵌幻灯片jQuery特效插件
PetitQ
pignose.parallaxslider.js 是一款带视觉差和子幻灯片特效的 jQuery 幻灯片插件。该幻灯片在每一个 slide 中都可以带一个子幻灯片，两重幻灯片在运行的过程中会产生不错的视觉差效果。
使用方法：
在页面中引入 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 | 幻灯片移动之后的回调函数 |
github 地址：https://github.com/KennethanCeyer/PIGNOSE-ParallaxSlider
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
