绝对炫的3D幻灯片-SLICEBOX

所属分类：媒体-图片展示

45259 429 查看评论 (4)

分享到微信朋友圈

查看演示立即下载

插件描述：SLICEBOX 是一个用css3打造出来的3D幻灯片，请使用最新 Chrome，Firefox 和 Safari 浏览器浏览效果。将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代码

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

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

<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; }