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

　　　　　　　　

SliceBox的更多相关文章

  1. 绝对炫的3D幻灯片-SLICEBOX

    绝对炫的3D幻灯片-SLICEBOX http://www.jq22.com/jquery-info31

  2. jQuery的slicebox插件实现3D翻转轮播效果

    最近做项目,banner要实现立体的翻转效果,通过搜索,发现了jQuery的一款插件,能够很好的实现该效果,这里就记录一下. 效果图如下: 使用方法: 1. 在html中引入必要的js和css文件: ...

  3. 3d转换-正方体-Html5Css3-遁地龙卷风

    (-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...

  4. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  5. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  6. Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》

    <Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

  7. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  8. onethink插件二（首页图片轮播）

    2014年8月1日 15:34:15 基于slice-box 写了一个图片轮播的插件. 一.功能: 1.图片轮播功能 2.自定义功能(数量,效果,打开方式) 3.多重效果一键切换 4.独立性强,不影响 ...

  9. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

随机推荐

  1. Spring Cloud 服务网关Zuul

    Spring Cloud 服务网关Zuul 服务网关是分布式架构中不可缺少的组成部分,是外部网络和内部服务之间的屏障,例如权限控制之类的逻辑应该在这里实现,而不是放在每个服务单元. Spring Cl ...

  2. s=a+aa+aaa+aaaa+aa...a的值，其中a是一个数字。例如2+22+222+2222+22222(此时共有5个数相加)，几个数相加由用户控制。

    package com.hanqi; import java.util.*; public class yonghukongzhi { public static void main(String[] ...

  3. databaseDesgin-temple

    ylbtech-dbs:ylbtech-storebook- A, 返回顶部 1, 2, B,返回顶部 1, 2, C,返回顶部 作者:ylbtech出处:http://storebook.cnblo ...

  4. 将新浪博客里的表情包存入MySQL数据库不完整版本一堆可能用到的散乱代码

    header = {'Cookie': 'SINAGLOBAL=7368591819178.463.1491810091070; ALF=1558832450; SCF=Ajrc1sxuwynVIu_ ...

  5. 数据结构和算法之单向链表二：获取倒数第K个节点

    我们在做算法的时候或多或少都会遇到这样的问题,那就是我们需要获取某一个数据集的倒数或者正数第几个数据.那么今天我们来看一下这个问题,怎么去获取倒数第K个节点.我们拿到这个问题的时候自然而然会想到我们让 ...

  6. OD 实验(五) - 对 PE 结构的简单分析

    载入程序,按 Alt+M 查看内存空间 双击进入程序的 PE 头 这些为 DOS 环境下才会运行的 这个执行 PE 的地址,PE 结构的偏移地址为 C0 找到这个地址 以 PE 开头 SizeOfCo ...

  7. svn使用常用错误

    描述 :SVN更新提交显示文件被锁异常: Working copy XXXXXXXX locked Please execute "Cleanup" command 原因 : 待查 ...

  8. Android复杂自定义Listview实现

    在Android中实现Listview对新人来说比较难以理解,本人看了若干文章后觉得可以使用以下思路来让新人更好理解(同时也做好记录,免得自己以后忘记). 可参考博客:http://cinderell ...

  9. 版本控制git之一 - 仓库管理

    git 再开始这个话题之前,让我想起了一件很痛苦的事情,在我大学写毕业论文的时候,我当时的文件是这样保存的 毕业论文_初稿.doc 毕业论文_修改1.doc 毕业论文_修改2.doc 毕业论文_修改3 ...

  10. C#做的在线升级小程序

    转自原文C#做的在线升级小程序 日前收到一个小任务,要做一个通用的在线升级程序.更新的内容包括一些dll或exe或.配置文件.升级的大致流程是这样的,从服务器获取一个更新的配置文件,经过核对后如有新的 ...