Slicebox 是一款效果非常华丽的 jquery 和 css3 3d 幻灯片插件。Slicebox 幻灯片插件能够将图片切片,然后做 3d 旋转。Slicebox 幻灯片插件共有 4 种效果,视觉冲击感非常强。SliceBox 是一个使用了 CSS 3D Transforms 的 jQuery 3D 幻灯片插件。Slicebox 在浏览器不支持 CSS3 新特性时提供了一个回调函数,使 Slicebox 退化为普通的幻灯片效果。
首先要创建一个无序列表,并给它 class sb-slider
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank">
<img src="images/1.jpg" alt="image1"/>
</a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
<li>
<img src="images/2.jpg" alt="image2"/>
<div class="sb-description">
<h3>...</h3>
</div>
</li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
你可以将图片的描述信息放置在 class 为 sb-description 的 div 中。
$('#sb-slider').slicebox();
可选参数:
slicebox 配有一套齐全的参数选项,使你可以调整各种类型的效果:
$.Slicebox.defaults = {
// (v)ertical, (h)orizontal or (r)andom
orientation : 'v',
// perspective value
perspective : 1200,
// number of slices / cuboids
// needs to be an odd number 15 => number > 0 (if you want the limit higher,
// change the _validate function).
cuboidsCount : 5,
// if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
cuboidsRandom : false,
// the range of possible number of cuboids if cuboidsRandom is true
// it is strongly recommended that you do not set a very large number :)
maxCuboidsCount : 5,
// each cuboid will move x pixels left / top (depending on orientation).
// The middle cuboid doesn't move. the middle cuboid's neighbors will
// move disperseFactor pixels
disperseFactor : 0,
// color of the hidden sides
colorHiddenSides : '#222',
// the animation will start from left to right. The left most
// cuboid will be the first one to rotate
// this is the interval between each rotation in ms
sequentialFactor : 150,
// animation speed
// this is the speed that takes "1" cuboid to rotate
speed : 600,
// transition easing
easing : 'ease',
// if true the slicebox will start the animation automatically
autoplay : false,
// time (ms) between each rotation, if autoplay is true
interval: 3000,
// the fallback will just fade out / fade in the items
// this is the time fr the fade effect
fallbackFadeSpeed : 300,
// callbacks
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }
};
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!