jQuery SimpleCarousel v0.1.0

yaohaixiao

以前也写过Carousel特效，不过这次比较正式，在github上发布了。使用了Grunt（Grunt 中文网）部署代码，这个对刚接触的朋友可能会有一些帮助。好吧，具体的大家看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. 
   
6.     // carousel 列表 ID 选择器或者 HTMLElement DOM 节点（可选）
   
7.     // 默认值：#carousel-list
   
8.     carousel: "#carousel-list",
   
9. 
   
10.     // 单个item 选择器的名称（可选）
    
11.     // 默认值：li
    
12.     item: "li",
    
13. 
    
14.     // 向上翻页按钮选择器或者 HTMLElement DOM 节点（可选）
    
15.     // 默认值：#carousel-prev-btn
    
16.     prevBtn: "#carousel-prev-btn",
    
17. 
    
18.     // 向下翻页按钮选择器或者 HTMLElement DOM 节点（可选）
    
19.     // 默认值：#carousel-next-btn
    
20.     nextBtn: "#carousel-next-btn",
    
21. 
    
22.     // 滚动方向（可选）
    
23.     // 默认值：H - 横向滚动
    
24.     //        V - 纵向滚动
    
25.     playDirection: "H",
    
26. 
    
27.     // 是否自动播放（可选）
    
28.     // 默认值：false - 不自动播放
    
29.     //        true  - 自动播放
    
30.     autoPlay: true,
    
31. 
    
32.     // （自动播放时）切换完一页后，切换到下一页的时间间隔（可选）
    
33.     // 默认值：3000 - 等待3秒，然后切换
    
34.     pageSwitchDelay: 3000,
    
35. 
    
36.     // 动画滚动一屏所用的时间（可选）
    
37.     // 默认值：500 - 切换一屏动画时间为半秒
    
38.     animateDuration: 500,
    
39. 
    
40.     // 滚动时的 easing 动画特效名称（可选）
    
41.     // 默认值：swing
    
42.     // 其他可选值：linear,easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic...
    
43.     // [url=home.php?mod=space&uid=599045]@see[/url] http://gsgd.co.uk/sandbox/jquery/easing/
    
44.     // @see http://easings.net/zh-cn/
    
45.     easing: "swing",
    
46. 
    
47.     // 自动播放时，滚动翻页的方向（可选）
    
48.     // 默认值：forward - 向下翻页
    
49.     //        back    - 向回翻页
    
50.     pageDirection: "back",
    
51. 
    
52.     // 是否无缝循环滚动，或者来回滚动（可选）
    
53.     // 默认值：false  - 来回滚动
    
54.     //        true   - 无缝循环滚动
    
55.     cyclePlay: false,
    
56. 
    
57.     // （来回滚动时）到第一页或者最后一页翻页按钮是否（可选）
    
58.     // 默认值：false - 按钮一直可用，页面循环来回滚动;
    
59.     //        true  - 在第一页，向上翻页按钮不可用；
    
60.     //                在最后一页，向下翻页按钮不可用;
    
61.     buttonAvailable: false,
    
62. 
    
63.     // 默认显示第几页（可选）
    
64.     // 默认值：0
    
65.     defaultPage: 0,
    
66. 
    
67.     // 切换一次的 Item 数量（可选）
    
68.     // 默认值：0 - 自动计算，根据展示区域高度或宽度来计算每屏可显示的 Item 数量
    
69.     itemsPerStep: 0,
    
70. 
    
71.     // 页面开始切换时，预先要执行的事情（可选）
    
72.     // 默认值：null（函数：function)
    
73.     beforeSwitch: function(){
    
74.        alert("Carousel 要开始滚动了哦！");
    
75.     },
    
76. 
    
77.     // 切换玩一页后，要执行的事情（可选）
    
78.     // 默认值：null（函数：function)
    
79.     afterSwitched: function(){
    
80.        alert("Carousel 滚动已经滚动完一页了哦！");
    
81.     },
    
82. 
    
83.     // 是否自动生成分页导航
    
84.     // 默认值：false - 不生成分页导航
    
85.     //        true  - 自动生成分页导航
    
86.     paginated: false,
    
87. 
    
88.     // ajax 动态加载数据
    
89.     ajax: {
    
90.         // ajax.url - 请求路径（必选）
    
91.         url: TXT.EMPTY,
    
92. 
    
93.         // ajax.itemInnerHTML - item（li）中显示内容（innerHTML）的模板（可选）
    
94.         // @see TEMPLATE.ITEM_INNER_HTML
    
95.         itemInnerHTML: TEMPLATE.ITEM_INNER_HTML,
    
96. 
    
97.         // $.ajax() 方法的标准参数 beforeSend，发送请求前执行的函数（可选）
    
98.         // @see http://api.jquery.com/jQuery.ajax/
    
99.         beforeSend: null,
    
100. 
     
101.         // $.ajax() 方法的标准参数 complete，请求执行成功后要执行的函数（可选）
     
102.         // @see http://api.jquery.com/jQuery.ajax/
     
103.         complete: null,
     
104. 
     
105.         // $.ajax() 方法的标准参数 error，请求发生错误要执行的函数（可选）
     
106.         // @see http://api.jquery.com/jQuery.ajax/
     
107.         error: null
     
108.     }
     
109. });

复制代码

License

Licensed under the MIT license.

yaohaixiao

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

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

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

这个是个稍微复杂些的实际应用

yaohaixiao

http://plugins.jquery.com/easycarousel/1.9.3-3/

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

API 正在努力整理编写中