绝对炫的3D幻灯片-SLICEBOX

插件描述:SLICEBOX 是一个用css3打造出来的3D幻灯片,请使用最新 Chrome,Firefox 和 Safari 浏览器浏览效果。将SLICEBOX放到你的网页中绝对会增强你网页的视觉。

 

演示下载

 

演示? ? 下载

 

 

绝对炫的3D幻灯片-SLICEBOX

使用步骤

1、引入以下的js和css文件

<link?rel="stylesheet"?type="text/css"?href="css/demo.css">

<link?rel="stylesheet"?type="text/css"?href="css/slicebox.css">

<link?rel="stylesheet"?type="text/css"?href="css/custom.css">

<script?type="text/javascript"?src="js/modernizr.custom.46884.js"></script>
<script?type="text/javascript"?src="1.8.2/jquery.min.js"></script>
<script?type="text/javascript"?src="js/jquery.slicebox.js"></script>

 

2、在head标签中加入以下js代码

1
?$('#sb-slider').slicebox();

3、在body标签中加入以下格式的html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>????????

参数分析

orientation:’v’
表示幻灯片的切换方向,可取 (v)垂直方向, (h)水平方向 or (r)随机方向
perspective:1200
透视点距离,可以通过改变其值查看效果
cuboidsCount:3
幻灯片横向或纵向被切割的块数,切割的每一块将会以3D的形式切换
cuboidsRandom : false
是否随机 cuboidsCount 参数的值
maxCuboidsCount : 5
设置一个值用来规定最大的 cuboidsCount 值
colorHiddenSides : ‘#222′
隐藏的幻灯片的颜色
sequentialFactor : 150
幻灯片切换时间(毫秒数)
speed : 600
每一块3D立方体的速度
autoplay : false
是否自动开始切换
回调函数
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }

发表评论

电子邮件地址不会被公开。 必填项已用*标注