幻灯片/轮播

超酷堆叠图片切换展示jQuery插件

面包多

超酷堆叠图片切换展示jQuery插件-创客云
wdImageStax 是一款效果非常酷的堆叠图片切换展示 jQuery 插件。该插件可以将一组图片进行堆叠,每张图片随机旋转不同的角度。当用户点击某张图片时,这张图片会被抽出放到堆叠图片的最后位置。

使用方法:

该堆叠图片插件依赖于 jQueryUI,使用时要引入相关的依赖文件。

也想出现在这里?联系我们
创客主机
  1. <link href="css/wdImageStax.css" rel="stylesheet">
  2. <script src="jquery/1.11.1/jquery.min.js"></script>
  3. <script src="jqueryui/1.11.2/jquery-ui.min.js"></script>
  4. <script src="jquery.wdImageStax.min.js"></script>

HTML 结构:

该堆叠图片画廊的 HTML 结构使用一个<div>作为包裹元素,里面放置一个无序列表,列表中每一项都是一张图片。

  1. <div id="gallery-wrapper">
  2.     <ul>
  3.         <li><img src="1.jpg" /></li>
  4.         <li><img src="2.jpg" /></li>
  5.         <li><img src="3.jpg" /></li>
  6.     </ul>
  7. </div>

初始化插件:

在页面 DOM 元素加载完毕之后,可以通过 wdImageStax()方法来初始化该堆叠图片插件。

  1. $(document).ready(function() {
  2.     $('#gallery-wrapper').wdImageStax({height:500});
  3.  
  4.     //或者使用默认的参数 
  5.     $('#gallery-wrapper').wdImageStax();
  6. });

配置参数:

下面是该堆叠图片插件的可用配置参数。

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:每一张图片的样式。默认值为空的{}

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!