使用:<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的容器里是图片说明,放什么内容你自己看着办。
$('#sb-slider').slicebox();选项: // 图片切片的旋转方向:(v)垂直, (h)水平 或者 (r)随机,默认为垂直。
orientation : 'v',
// 透视程度
perspective : 1200,
// 图片切片的数目,奇数,范围:0-15,默认值5
cuboidsCount : 5,
// 图片切片的数目随机,如果这个值是true,则上一个参数无效
cuboidsRandom : false,
// 图片切片的数目随机时,最大数值,提醒:切勿把数值设置过大,容易出事:)
maxCuboidsCount : 5,
// 切片的水平/垂直偏移量
disperseFactor : 0,
// 图片切片隐藏面的颜色
colorHiddenSides : '#222',
// 图片切片旋转的速度,单位毫秒
sequentialFactor : 150,
// 动画速度,单位毫秒
speed : 600,
// 切换缓冲效果
easing : 'ease',
// 图片切换是否自动开始
autoplay : false,
// 如果上面的参数设置为true,自动切换间隔时间,单位毫秒
interval: 3000,
// 回退的淡入淡出时间,单位毫秒
fallbackFadeSpeed : 300,
// 回调函数
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }插件来源:http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/ 

上一篇12周年纪念
