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

相關文章
相關標籤/搜索