简单的传送带分页使用的是MooTools
随着各种有旋转木马,以及MooTools的很多,我还是决定写我自己的传送带类,一些很好的理由
1。 想要一个寻呼功能(能够跳到一个特定的幻灯片/传送带一步)。
2。 要安置的左,右按钮/链接的自由,我曾经请。
3。 在幻灯片的步骤更多的控制权。
我设法创建一个新的传送带,具有上述特点如下...随意提出的任何修改,你会需要!!!
我的例子看起来像... [ 查看演示 ]
观看演示 | 下载MooTools的传送带寻呼版本1.0 (下载1990年)
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的
观看演示 | 下载MooTools的传送带寻呼版本1.0 (下载1990年)












































