收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2019|回复: 2

[作品展示] jQuery SimpleCarousel v0.1.0

[复制链接]
发表于 2014-9-2 17:31:18 | 显示全部楼层 |阅读模式
本帖最后由 yaohaixiao 于 2014-9-7 08:06 编辑

以前也写过Carousel特效,不过这次比较正式,在github上发布了。使用了GruntGrunt 中文网)部署代码,这个对刚接触的朋友可能会有一些帮助。好吧,具体的大家看DEMO吧,我也会尽快把API文档写好。

git:  https://github.com/yaohaixiao/SimpleCarousel.git

DEMO: http://www.yaohaixiao.com/simple-carousel/examples/

API DOCS: 还没有来得及写

Configration
  1. $("#carousel-album").simpleCarousel({
  2.     // 滚动的区域 ID 选择器或者 HTMLElement DOM 节点(可选)
  3.     // 默认值:#carousel-container
  4.     container: "#carousel-container",

  5.     // carousel 列表 ID 选择器或者 HTMLElement DOM 节点(可选)
  6.     // 默认值:#carousel-list
  7.     carousel: "#carousel-list",

  8.     // 单个item 选择器的名称(可选)
  9.     // 默认值:li
  10.     item: "li",

  11.     // 向上翻页按钮选择器或者 HTMLElement DOM 节点(可选)
  12.     // 默认值:#carousel-prev-btn
  13.     prevBtn: "#carousel-prev-btn",

  14.     // 向下翻页按钮选择器或者 HTMLElement DOM 节点(可选)
  15.     // 默认值:#carousel-next-btn
  16.     nextBtn: "#carousel-next-btn",

  17.     // 滚动方向(可选)
  18.     // 默认值:H - 横向滚动
  19.     //        V - 纵向滚动
  20.     playDirection: "H",

  21.     // 是否自动播放(可选)
  22.     // 默认值:false - 不自动播放
  23.     //        true  - 自动播放
  24.     autoPlay: true,

  25.     // (自动播放时)切换完一页后,切换到下一页的时间间隔(可选)
  26.     // 默认值:3000 - 等待3秒,然后切换
  27.     pageSwitchDelay: 3000,

  28.     // 动画滚动一屏所用的时间(可选)
  29.     // 默认值:500 - 切换一屏动画时间为半秒
  30.     animateDuration: 500,

  31.     // 滚动时的 easing 动画特效名称(可选)
  32.     // 默认值:swing
  33.     // 其他可选值:linear,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic...
  34.     // [url=home.php?mod=space&uid=599045]@see[/url] http://gsgd.co.uk/sandbox/jquery/easing/
  35.     // @see http://easings.net/zh-cn/
  36.     easing: "swing",

  37.     // 自动播放时,滚动翻页的方向(可选)
  38.     // 默认值:forward - 向下翻页
  39.     //        back    - 向回翻页
  40.     pageDirection: "back",

  41.     // 是否无缝循环滚动,或者来回滚动(可选)
  42.     // 默认值:false  - 来回滚动
  43.     //        true   - 无缝循环滚动
  44.     cyclePlay: false,

  45.     // (来回滚动时)到第一页或者最后一页翻页按钮是否(可选)
  46.     // 默认值:false - 按钮一直可用,页面循环来回滚动;
  47.     //        true  - 在第一页,向上翻页按钮不可用;
  48.     //                在最后一页,向下翻页按钮不可用;
  49.     buttonAvailable: false,

  50.     // 默认显示第几页(可选)
  51.     // 默认值:0
  52.     defaultPage: 0,

  53.     // 切换一次的 Item 数量(可选)
  54.     // 默认值:0 - 自动计算,根据展示区域高度或宽度来计算每屏可显示的 Item 数量
  55.     itemsPerStep: 0,

  56.     // 页面开始切换时,预先要执行的事情(可选)
  57.     // 默认值:null(函数:function)
  58.     beforeSwitch: function(){
  59.        alert("Carousel 要开始滚动了哦!");
  60.     },

  61.     // 切换玩一页后,要执行的事情(可选)
  62.     // 默认值:null(函数:function)
  63.     afterSwitched: function(){
  64.        alert("Carousel 滚动已经滚动完一页了哦!");
  65.     },

  66.     // 是否自动生成分页导航
  67.     // 默认值:false - 不生成分页导航
  68.     //        true  - 自动生成分页导航
  69.     paginated: false,

  70.     // ajax 动态加载数据
  71.     ajax: {
  72.         // ajax.url - 请求路径(必选)
  73.         url: TXT.EMPTY,

  74.         // ajax.itemInnerHTML - item(li)中显示内容(innerHTML)的模板(可选)
  75.         // @see TEMPLATE.ITEM_INNER_HTML
  76.         itemInnerHTML: TEMPLATE.ITEM_INNER_HTML,

  77.         // $.ajax() 方法的标准参数 beforeSend,发送请求前执行的函数(可选)
  78.         // @see http://api.jquery.com/jQuery.ajax/
  79.         beforeSend: null,

  80.         // $.ajax() 方法的标准参数 complete,请求执行成功后要执行的函数(可选)
  81.         // @see http://api.jquery.com/jQuery.ajax/
  82.         complete: null,

  83.         // $.ajax() 方法的标准参数 error,请求发生错误要执行的函数(可选)
  84.         // @see http://api.jquery.com/jQuery.ajax/
  85.         error: null
  86.     }
  87. });
复制代码
License

Licensed under the MIT license.
 楼主| 发表于 2014-9-2 17:42:58 | 显示全部楼层
本帖最后由 yaohaixiao 于 2014-9-2 17:44 编辑

http://www.matetea.net.cn/fashion-1.php

这个是一个在线的实际应用

http://www.hubei.gov.cn/zwgk/wjfwzl/

这个是个稍微复杂些的实际应用
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-3 18:09:24 | 显示全部楼层
http://plugins.jquery.com/easycarousel/1.9.3-3/

发布到jQuery上了,没有办法,有一个同名的程序,所以我只得把版本定到了1.9.3

API 正在努力整理编写中
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-28 11:29 , Processed in 0.081823 second(s), 6 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表