SliceBox
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的更多相关文章
- 绝对炫的3D幻灯片-SLICEBOX
绝对炫的3D幻灯片-SLICEBOX http://www.jq22.com/jquery-info31
- jQuery的slicebox插件实现3D翻转轮播效果
最近做项目,banner要实现立体的翻转效果,通过搜索,发现了jQuery的一款插件,能够很好的实现该效果,这里就记录一下. 效果图如下: 使用方法: 1. 在html中引入必要的js和css文件: ...
- 3d转换-正方体-Html5Css3-遁地龙卷风
(-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
<Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...
- 使用CSS3实现3D图片滑块效果
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- onethink插件二（首页图片轮播）
2014年8月1日 15:34:15 基于slice-box 写了一个图片轮播的插件. 一.功能: 1.图片轮播功能 2.自定义功能(数量,效果,打开方式) 3.多重效果一键切换 4.独立性强,不影响 ...
- 第一章 jQuery基础
第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...
随机推荐
- MySql触发器实现数据同步学习
触发器实现:(增.删.改操作事件触发数据单向同步)数据库触发器教程:https://www.cnblogs.com/phpper/p/7587031.html同步代码: DELIMITER $ DRO ...
- mysql索引之五：多列索引
索引的三星原则 1.索引将相关的记录放到一起,则获得一星 2.如果索引中的数据顺序和查找中的排列顺序一致则获得二星 3.如果索引中的列包含了查询中的需要的全部列则获得三星 多列索引 1.1.多个单列索 ...
- Java-Runoob-高级教程：Java 数据结构
ylbtech-Java-Runoob-高级教程:Java 数据结构 1.返回顶部 1. Java 数据结构 Java工具包提供了强大的数据结构.在Java中的数据结构主要包括以下几种接口和类: 枚举 ...
- 第十一章 Helm-kubernetes的包管理器（中）
11.5 chart详解 chart由一系列文件组成,这些文件描述了K8s部署应用时需要的资源,比如Servcie.Deployment.PersistentVolmeClaim.Secret.Con ...
- 【UVa】1374 Power Calculus（IDA*）
题目 题目 分析 IDA*大法好,抄了lrj代码. 代码 #include <cstdio> #include <cstring> #include <a ...
- 仅用CSS3创建h5预加载跳动圈
<head> <meta charset="UTF-8"> <title></title> <style type=" ...
- webDriver对element进行操作
非常感谢原作者:eastmount,原地址:http://blog.csdn.net/eastmount/article/details/48108259 感谢感谢 这篇文章主要Seleniu ...
- python打造XslGenerator
0x00前言 今天加载了Demon哥分享的RSS.其中有一篇是三好学生讲的: 在仔细越读这篇文章后,我懂得了里面的一些骚操作,所以有了以下的 脚本. 0x001代码 import optparse i ...
- sql语句中避免使用mysql函数，提升mysql处理能力。
如下sql中不要用mysql内置函数now()等,这样第一可以提高sql执行效率,第二统一程序层处理sql中时间参数,避免因服务器时间差导致问题产生. 使用PDO预处理,第一可以提高sql效率,第二可 ...
- 微软TechNet关于TLS的细节的描述
https://technet.microsoft.com/en-us/library/cc785811.aspx TLS协议太复杂了,RFC太长没时间看,这篇还可以,好歹知道个大概. 想知道全部细节 ...