幻灯片/轮播
超酷堆叠图片切换展示jQuery插件
PetitQ
wdImageStax 是一款效果非常酷的堆叠图片切换展示 jQuery 插件。该插件可以将一组图片进行堆叠，每张图片随机旋转不同的角度。当用户点击某张图片时，这张图片会被抽出放到堆叠图片的最后位置。
使用方法:
该堆叠图片插件依赖于 jQueryUI，使用时要引入相关的依赖文件。
也想出现在这里？联系我们吧
<link href="css/wdImageStax.css" rel="stylesheet">
<script src="jquery/1.11.1/jquery.min.js"></script>
<script src="jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="jquery.wdImageStax.min.js"></script>
HTML 结构:
该堆叠图片画廊的 HTML 结构使用一个<div>作为包裹元素，里面放置一个无序列表，列表中每一项都是一张图片。
<div id="gallery-wrapper">
<ul>
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
</ul>
</div>
初始化插件:
在页面 DOM 元素加载完毕之后，可以通过 wdImageStax()方法来初始化该堆叠图片插件。
$(document).ready(function() {
$('#gallery-wrapper').wdImageStax({height:500});
//或者使用默认的参数$('#gallery-wrapper').wdImageStax();
});
配置参数:
下面是该堆叠图片插件的可用配置参数。
height：堆叠图片画廊的高度，不用添加单位，默认值为 false
width：堆叠图片画廊的宽度，不用添加单位，默认值为 false
list：<ul>元素的 class 名称
centreImages：是否将图片居中，默认值为 false
index：图片栈的 z-index 值，默认值为 1200
degree：图片旋转的最大角度，默认值为 20
degreePattern：图片旋转的模式，可选值有："default" 或 "random"。取值"default"时，每张图片会增加旋转相同的角度
animateSpeed：点击图片时洗牌（图片切换）的速度，单位毫秒，默认值为 500
swingTop：图片向上动的高度，和图片的尺寸相关。默认值为 0.4。（1 表示 100%图片高度）
swingLeft：图片向左移动的宽度，和图片的尺寸相关。默认值为 0.6。（1 表示 100%图片高度）
evaluateOnWindowResize：是否在窗口尺寸改变时调整动画区域，默认值为 true
wrapperStyles：图片画廊的选择器/元素。默认值为空的{}
imageStyles：每一张图片的样式。默认值为空的{}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
