SliceBox

时间 2019-11-08

标签 slicebox 繁體版

原文原文链接

SliceBox至关于一个轮播图插件，只不过是3D的。先来查看它能实现的效果:javascript

官网：http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/css

兼容性：因为该插件使用到了CSS3中的变换变形等属性，因此在不支持CSS3的浏览器中看不到3D效果，html

　　　　可是图片切换的时候会是前一张图片淡入后一张图片淡出的效果，不支持ie6，在ie6+的版本中基本上java

　　　　看不到3D效果，ie7 8 9 都是淡入淡出效果，在ie10中效果更糟，虽然有3D效果，可是效果很是蛋疼，jquery

　　　　出现3D效果的时候看不到图片了。设计模式

Demo浏览器

须要的js和css文件dom

        <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="images/1.jpg" alt="image1"/>
            </li>
            <li>
                <img src="images/2.jpg" alt="image2"/>
            </li>
            <li>
                <img src="images/3.jpg" alt="image2"/>
            </li>
            <li>
                <img src="images/4.jpg" alt="image2"/>
            </li>
            <li>
                <img src="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>

属性介绍：ide

 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