SliceBox

時間 2019-11-08

標籤 slicebox 简体版

原文原文鏈接

SliceBox至關於一個輪播圖插件，只不過是3D的。先來查看它能實現的效果:javascript

官網：http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/css

兼容性：因爲該插件使用到了CSS3中的變換變形等屬性，因此在不支持CSS3的瀏覽器中看不到3D效果，html

　　　　可是圖片切換的時候會是前一張圖片淡入後一張圖片淡出的效果，不支持ie6，在ie6+的版本中基本上java

　　　　看不到3D效果，ie7 8 9 都是淡入淡出效果，在ie10中效果更糟，雖然有3D效果，可是效果很是蛋疼，jquery

　　　　出現3D效果的時候看不到圖片了。設計模式

Demo瀏覽器

須要的js和css文件dom

        <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="images/1.jpg" alt="image1"/>
            </li>
            <li>
                <img src="images/2.jpg" alt="image2"/>
            </li>
            <li>
                <img src="images/3.jpg" alt="image2"/>
            </li>
            <li>
                <img src="images/4.jpg" alt="image2"/>
            </li>
            <li>
                <img src="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>

屬性介紹：ide

 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

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。