幻灯片/轮播

Slicebox华丽3D轮播幻灯片插件

阿里云

Slicebox 是一款效果非常华丽的 jquery 和 css3 3d 幻灯片插件。Slicebox 幻灯片插件能够将图片切片,然后做 3d 旋转。Slicebox 幻灯片插件共有 4 种效果,视觉冲击感非常强。SliceBox 是一个使用了 CSS 3D Transforms 的 jQuery 3D 幻灯片插件。Slicebox 在浏览器不支持 CSS3 新特性时提供了一个回调函数,使 Slicebox 退化为普通的幻灯片效果。

HTML 结构:

首先要创建一个无序列表,并给它 class sb-slider

也想出现在这里?联系我们
创客主机
  1. <ul id="sb-slider" class="sb-slider">
  2.     <li>
  3.         <a href="#" target="_blank">
  4.             <img src="images/1.jpg" alt="image1"/>
  5.         </a>
  6.         <div class="sb-description">
  7.             <h3>Creative Lifesaver</h3>
  8.         </div>
  9.     </li>
  10.  
  11.     <li>
  12.         <img src="images/2.jpg" alt="image2"/>
  13.         <div class="sb-description">
  14.             <h3>...</h3>
  15.         </div>
  16.     </li>
  17.     <li><!-- ... --></li>  
  18.     <!-- ... -->   
  19. </ul>

你可以将图片的描述信息放置在 class 为 sb-description 的 div 中。

调用插件:

  1. $('#sb-slider').slicebox();
  1. 可选参数:

slicebox 配有一套齐全的参数选项,使你可以调整各种类型的效果:

  1. $.Slicebox.defaults = {
  2.     // (v)ertical, (h)orizontal or (r)andom
  3.     orientation : 'v',
  4.  
  5.     // perspective value
  6.     perspective : 1200,
  7.  
  8.     // number of slices / cuboids
  9.     // needs to be an odd number 15 => number > 0 (if you want the limit higher, 
  10.     // change the _validate function).
  11.     cuboidsCount : 5,
  12.  
  13.     // if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
  14.     cuboidsRandom : false,
  15.  
  16.     // the range of possible number of cuboids if cuboidsRandom is true
  17.     // it is strongly recommended that you do not set a very large number :)
  18.     maxCuboidsCount : 5,
  19.  
  20.     // each cuboid will move x pixels left / top (depending on orientation). 
  21.     // The middle cuboid doesn't move. the middle cuboid's neighbors will 
  22.     // move disperseFactor pixels
  23.     disperseFactor : 0,
  24.  
  25.     // color of the hidden sides
  26.     colorHiddenSides : '#222',
  27.  
  28.     // the animation will start from left to right. The left most 
  29.     // cuboid will be the first one to rotate
  30.     // this is the interval between each rotation in ms
  31.     sequentialFactor : 150,
  32.  
  33.     // animation speed
  34.     // this is the speed that takes "1" cuboid to rotate
  35.     speed : 600,
  36.  
  37.     // transition easing
  38.     easing : 'ease',
  39.  
  40.     // if true the slicebox will start the animation automatically
  41.     autoplay : false,
  42.  
  43.     // time (ms) between each rotation, if autoplay is true
  44.     interval: 3000,
  45.  
  46.     // the fallback will just fade out / fade in the items
  47.     // this is the time fr the fade effect
  48.     fallbackFadeSpeed : 300,
  49.  
  50.     // callbacks
  51.     onBeforeChange : function( position ) { return false; },
  52.     onAfterChange : function( position ) { return false; }
  53. };

Slicebox 华丽 3D 轮播幻灯片插件

已有 454 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

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