SliceBox相当于一个轮播图插件,只不过是3D的。 先来查看它能实现的效果:
官网:http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/
兼容性:由于该插件使用到了CSS3中的变换变形等属性,所以在不支持CSS3的浏览器中看不到3D效果,
但是图片切换的时候会是前一张图片淡入后一张图片淡出的效果,不支持ie6,在ie6+的版本中基本上
看不到3D效果,ie7 8 9 都是淡入淡出效果,在ie10中效果更糟,虽然有3D效果,但是效果非常蛋疼,
出现3D效果的时候看不到图片了。
Demo
需要的js和css文件
<link type="text/css" rel="stylesheet" href="css/slicebox.css" />
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery8.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
modernizr.js是用以探测浏览器对HTML5和CSS3新特性功能的支持。
参考:http://huangyang.me/modernizr.html
SliceBox用到了它进行浏览器兼容性的检查。 全部示例代码
<!DOCTYPE html>
<html class="no-js" lang="zh">
<head>
<meta charset="utf-8" />
<title> </title>
<link type="text/css" rel="stylesheet" href="css/slicebox.css" />
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery8.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
var $slicebox;
$(function() {
$slicebox = $('#sb-slider').slicebox({
interval:6000,
orientation : "r", //表示幻灯片的切换方向,可取 (v)垂直方向, (h)水平方向 or (r)随机方向
perspective : 800, //透视点距离,可以通过改变其值查看效果
cuboidsCount : 5, //幻灯片横向或纵向被切割的块数,切割的每一块将会以3D的形式切换
cuboidsRandom : true, //是否随机 cuboidsCount 参数的值
maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值
colorHiddenSides : "#333", //隐藏的幻灯片的颜色
sequentialFactor : 150, //幻灯片切换时间(毫秒数)
speed : 600, //每一块3D立方体的速度
autoplay : true, //是否自动开始切换
onBeforeChange : function(position) {
return false;
},
onAfterChange : function(position) {
return false;
}
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<ul id="sb-slider" class="sb-slider">
<li>
<img src="data:images/1.jpg" alt="image1"/>
</li>
<li>
<img src="data:images/2.jpg" alt="image2"/>
</li>
<li>
<img src="data:images/3.jpg" alt="image2"/>
</li>
<li>
<img src="data:images/4.jpg" alt="image2"/>
</li>
<li>
<img src="data:images/5.jpg" alt="image2"/>
</li>
</ul>
<div>
<span onclick="$slicebox.previous();">上一页</span>
<span onclick="$slicebox.next();">下一页</span>
<span onclick="$slicebox.jump(4);">跳页</span>
</div>
</body>
</html>
属性介绍:
interval:6000,//自动播放的时候每个多少毫秒播放下一个图片
orientation : "r", //表示幻灯片的切换方向,可取 (v)垂直方向, (h)水平方向 or (r)随机方向
perspective : 800, //透视点距离,可以通过改变其值查看效果(相当一你的眼睛离图片的距离)
cuboidsCount : 5, //幻灯片横向或纵向被切割的块数,切割的每一块将会以3D的形式切换
cuboidsRandom : true, //是否随机 cuboidsCount 参数的值(切换图片的时候图片被切割的个数是随机的)
maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值
disperseFactor : 50,//被切割的时候每个块分开的像素距离,默认是0
colorHiddenSides : "#333", //隐藏的幻灯片的颜色(被切割块侧面的颜色)
sequentialFactor : 150, //幻灯片切换时间(毫秒数)
speed : 600, //每一块3D立方体的速度
easing : 'ease', //切换效果
autoplay : true, //是否自动开始切换(如果设置为false,特通过play方法开始播放图片)
onBeforeChange : function(position) {},//改变前
onAfterChange : function(position) {}//改变后 //通过改变前改变后可以修改上面的文字说明
方法介绍:
我没从官网上找到SliceBox可调用的方法,不过我从firebug和官网demo中找到了点。下面是firebug中查看到的效果:
以下划线 '_' 开头应该是私有方法(其实我也不确定,貌似在javascript设计模式上看过这样的设计),私有方法不建议调用,但是既然设计者
故意暴露出来了,没有故意隐藏,说明还是可以调用的,这里不讨论这些私有方法作用(因为我没有实验)。
next(); //播放下一章张图片
previous(); //播放上一章张图片
play(); // 开始播放(当属性设置为不自动播放的时候,可以通过该方法开始播放)
pause(); // 暂停播放
jump(index); // 跳到哪一张图片
上面的方法我测试过,用法上应该没问题。
下面的方法我没用过,不过我猜测了一下,等到镇长用上了再测试一下吧。
add(); 应该是增加一张图片到当前播放的队列中
destory(); 应该是销毁slicebox对象
isActive(); 应该是判断当前图片是否正在切换
本文示例链接:http://url.cn/VZ9hAN或http://share.weiyun.com/bf8327c876bedb4ba84eb97cffdff8f4