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