<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周年纪念