- UID
- 281860
- 在线时间
- 小时
- 积分
- 2139
- 帖子
- 离线
- 18650 天
- 注册时间
- 2006-8-7
|
本帖最后由 yaohaixiao 于 2014-9-7 08:06 编辑
以前也写过Carousel特效,不过这次比较正式,在github上发布了。使用了Grunt(Grunt 中文网)部署代码,这个对刚接触的朋友可能会有一些帮助。好吧,具体的大家看DEMO吧,我也会尽快把API文档写好。
git: https://github.com/yaohaixiao/SimpleCarousel.git
DEMO: http://www.yaohaixiao.com/simple-carousel/examples/
API DOCS: 还没有来得及写
Configration- $("#carousel-album").simpleCarousel({
- // 滚动的区域 ID 选择器或者 HTMLElement DOM 节点(可选)
- // 默认值:#carousel-container
- container: "#carousel-container",
- // carousel 列表 ID 选择器或者 HTMLElement DOM 节点(可选)
- // 默认值:#carousel-list
- carousel: "#carousel-list",
- // 单个item 选择器的名称(可选)
- // 默认值:li
- item: "li",
- // 向上翻页按钮选择器或者 HTMLElement DOM 节点(可选)
- // 默认值:#carousel-prev-btn
- prevBtn: "#carousel-prev-btn",
- // 向下翻页按钮选择器或者 HTMLElement DOM 节点(可选)
- // 默认值:#carousel-next-btn
- nextBtn: "#carousel-next-btn",
- // 滚动方向(可选)
- // 默认值:H - 横向滚动
- // V - 纵向滚动
- playDirection: "H",
- // 是否自动播放(可选)
- // 默认值:false - 不自动播放
- // true - 自动播放
- autoPlay: true,
- // (自动播放时)切换完一页后,切换到下一页的时间间隔(可选)
- // 默认值:3000 - 等待3秒,然后切换
- pageSwitchDelay: 3000,
- // 动画滚动一屏所用的时间(可选)
- // 默认值:500 - 切换一屏动画时间为半秒
- animateDuration: 500,
- // 滚动时的 easing 动画特效名称(可选)
- // 默认值:swing
- // 其他可选值:linear,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic...
- // [url=home.php?mod=space&uid=599045]@see[/url] http://gsgd.co.uk/sandbox/jquery/easing/
- // @see http://easings.net/zh-cn/
- easing: "swing",
- // 自动播放时,滚动翻页的方向(可选)
- // 默认值:forward - 向下翻页
- // back - 向回翻页
- pageDirection: "back",
- // 是否无缝循环滚动,或者来回滚动(可选)
- // 默认值:false - 来回滚动
- // true - 无缝循环滚动
- cyclePlay: false,
- // (来回滚动时)到第一页或者最后一页翻页按钮是否(可选)
- // 默认值:false - 按钮一直可用,页面循环来回滚动;
- // true - 在第一页,向上翻页按钮不可用;
- // 在最后一页,向下翻页按钮不可用;
- buttonAvailable: false,
- // 默认显示第几页(可选)
- // 默认值:0
- defaultPage: 0,
- // 切换一次的 Item 数量(可选)
- // 默认值:0 - 自动计算,根据展示区域高度或宽度来计算每屏可显示的 Item 数量
- itemsPerStep: 0,
- // 页面开始切换时,预先要执行的事情(可选)
- // 默认值:null(函数:function)
- beforeSwitch: function(){
- alert("Carousel 要开始滚动了哦!");
- },
- // 切换玩一页后,要执行的事情(可选)
- // 默认值:null(函数:function)
- afterSwitched: function(){
- alert("Carousel 滚动已经滚动完一页了哦!");
- },
- // 是否自动生成分页导航
- // 默认值:false - 不生成分页导航
- // true - 自动生成分页导航
- paginated: false,
- // ajax 动态加载数据
- ajax: {
- // ajax.url - 请求路径(必选)
- url: TXT.EMPTY,
- // ajax.itemInnerHTML - item(li)中显示内容(innerHTML)的模板(可选)
- // @see TEMPLATE.ITEM_INNER_HTML
- itemInnerHTML: TEMPLATE.ITEM_INNER_HTML,
- // $.ajax() 方法的标准参数 beforeSend,发送请求前执行的函数(可选)
- // @see http://api.jquery.com/jQuery.ajax/
- beforeSend: null,
- // $.ajax() 方法的标准参数 complete,请求执行成功后要执行的函数(可选)
- // @see http://api.jquery.com/jQuery.ajax/
- complete: null,
- // $.ajax() 方法的标准参数 error,请求发生错误要执行的函数(可选)
- // @see http://api.jquery.com/jQuery.ajax/
- error: null
- }
- });
复制代码 License
Licensed under the MIT license. |
|