绝对炫的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; }

点赞

发表评论