隨著各種有旋轉木馬,以及MooTools的很多,我還是決定寫我自己的傳送帶類,一些很好的理由
1。 想要一個尋呼功能(能夠跳到一個特定的幻燈片/傳送帶一步)。
2。 要安置的左,右按鈕/鏈接的自由,我曾經請。
3。 在幻燈片的步驟更多的控制權。
我設法創建一個新的傳送帶,具有上述特點如下...隨意提出的任何修改,你會需要!!!
我的例子看起來像... [ 查看演示 ]
觀看演 示 尋呼版本1.0下載MooTools的旋轉木馬 (下載1980年代)
1。 傳送帶尋呼
你可以很容易地添加分頁到您的轉盤,只需通過設置分頁標誌,這是最後parater通過創建的真實MooCarousel的實例(要分頁)或false(donot想分頁)。
VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss, 真正 ); / / NS =幻燈片,SSS =滑動步長
當然你可以通過修改它們的CSS改變外觀這些尋呼achors的N-覺得你請。
carousel_paging {文本對齊:權利;保證金:5PX 10px 0 0;}
。carousel_paging電流,carousel_paging頁{概要:無;寬度:。均為15px;高度:均為15px;線高度:均為15px;文本對齊:中心;顯示:塊;浮動:左;背景:#D8D8EB;保證金:0 1px的0;文字裝飾:無;}
。carousel_paging:懸停,carousel_paging當前{背景:#4D4D9B;顏色:#FFFFFF;}。
好吧! 雖然是一個小問題,如果設置分頁錨,然後將得到產生總是在旋轉木馬組件。 我想動態,以及,但只是為了讓吹出來的比例腳本,我決定跳過它。
但你知道一點點的JavaScript,你可以很容易地修改在MooCarousel類傳呼代碼,請您的需求。
2。 訂製左,右的圖標
只需打的CSS,你可以改變位置,圖像或任何displat財產的左,右按鈕。 是能夠改變的“左”和右的buttoms存款是我的權利我傳送帶類的真正原因。
以來這個MooCarousel類,接受這些按鈕的ID,你可以把這些按鈕在頁面上的任何地方,如果你願意,它並不一定要在元素層次,因為在我的例子。
VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss,真正);
的CSS
carousel_container_l,carousel_container_r {保證金:50像素0 0 0;位置:親屬;寬度:23px;高度:20像素;浮動:左;光標:指針;}
carousel_container_r {背景位置:0-38px;}
carousel_container_l {背景位置:0-58px;}
3。 自定義幻燈片步驟
這是什麼意思我自定義幻燈片的步驟?
大多數傳送帶滑動完整的可視窗口。 所以說,你有四個項目(如我上面的樣品),它會滑動的所有四個項目。 有了這個轉盤組件,通過幻燈片的數量和您選擇的步長。
VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss,真正);
c_ns =數量的幻燈片,c_sss =滑動步長
此外,在我的例1,我calcuted滑動步長,基於邏輯的地方,我知道數量的項目,每個項目的寬度和已後,我的CSS在每個項目的利潤率。
狂歡/ * 1 * /
c1_w = 92; / /狂歡項目寬度
VAR c1_n = 10;的比較狂歡項數/ /合計
VAR c1_pp = 4 / /比較狂歡項目每頁數
c1_marginFactor = 51;
c1_sss VAR = c1_w * c1_pp; / / SSS =滑動步長
VAR c1_ns = parseInt(((c1_w * c1_n)/ c1_sss)+0.5)/ / NS =幻燈片
c1_sss + = c1_marginFactor的; / / SSS =滑動步長,51利潤
要求:MooTools 1.2的
觀看演 示 尋呼版本1.0下載MooTools的旋轉木馬 (下載1980年代)