Slider图片轮播组件
- 依赖
- JS对象
- 例如

Slider图片轮播组件

图片轮播组件是根据AppCan 布局框架对图片轮播封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成图片轮播界面的开发。

依赖

appcan.js
appcan.control.js
appcan.slider.js
appcan.control.css

JS对象

函数

appcan.slider({参数})

1. selector:   /*选择器*/,
2. hasIndicator: true or false  /*是否有位置提示条*/,
3. hasLabel: true or false   /*是否有标签文字栏*/,
4. aspectRatio: 0 or !=0   /*是否控制纵横比，0为使用控件高度，>0使用纵横比*/,
5. index: 0 or >0   /*默认选择项*/
6. auto:2000   /*轮播时间，单位毫秒*/
7. hasContent: true or false 支持slider设置文字区域
8. canDown: true or false 设置图片/文字区域是否可以下拉
9. hasCircle: true or false 设置圆点位置提示标志
10. circleSlide:true or false 设置是否循环轮播（下载最新JSSDK）

方法

set(data)

1. data:JSON   对象数组，用于存储显示的图片、提示文字信息

clickItem事件

1. data:JSON   点击条目时触发，告知点击的索引和索引对应的数据对象

change事件

1. data:JSON   滑动条目时触发，告知滑动的索引

例如

HTML5代码

1. <div id="slider" class="slider">
2. </div>

JS代码

1. var slider = appcan.slider({
2. selector : '#slider',
3. aspectRatio:6/16,
4. hasLabel:true,
5. index:1,
6. auto:2000
7. });
8. slider.set([{
9. img : "../images/loading_pic1.jpg",
10. label:"快速！丰富稳定的UI组件、海量的行业UI模板，快速拼装APP"
11. }, {
12. img : "../images/loading_pic2.jpg",,
13. label:"便捷！网络部署APP，摆脱数据线"
14. }, {
15. img : "../images/loading_pic3.jpg",,
16. label:"高效！项目云端同步，多人协同开发"
17. }, {
18. img : "../images/loading_pic4.jpg",,
19. label:"所见即所得！真机同步调试应用代码"
20. }, {
21. img : "../images/loading_pic5.jpg",,
22. label:"高效！代码提示，无忧编程"
23. }])
24. slider.on("clickItem",function(index,data){
25. console.log(index,data);
26. })

hasContent

说明：默认hasContent为false，当hasContent为false的时候slider支持图片区域；当hasContent为true的时候slider支持文字区域相关说明：size 设置文字内容区域的文字大小版本支持：JSSDK1.18测试case：下载

1. var slider = appcan.slider({
2. selector : '#slider',
3. aspectRatio:12/16,
4. hasContent:true,
5. index:0,
6. hasIndicator:true,
7. size:20,
8. });
9. slider.set([{
10. note:'2如果你的新项目预算很低，那么免费网站模板对你来说是一个很好的解决方案。有很多的预先设计的网站模板PSD素材可以使用和自由定制。在这里，你会发现可供

12. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
13. label:"123"
14. }, {
15. note:'2如果你的新项目预算很低，那么免费网站模板对你来说是一个很好的解决方案。有很多的预先设计的网站模板PSD素材可以使用和自由定制。在这里，你会发现可供

17. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
18. label:"456"
19. }, {
20. note:'2如果你的新项目预算很低，那么免费网站模板对你来说是一个很好的解决方案。有很多的预先设计的网站模板PSD素材可以使用和自由定制。在这里，你会发现可供

22. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
23. label:"789"
24. }, {
25. note:'如果你的新项目预算很低，那么免费网站模板对你来说是一个很好的解决方案。有很多的预先设计的网站模板PSD素材可以使用和自由定制。在这里，你会发现可供

27. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
28. label:"101"
29. }, {
30. note:'如果你的新项目预算很低，那么免费网站模板对你来说是一个很好的解决方案。有很多的预先设计的网站模板PSD素材可以使用和自由定制。在这里，你会发现可供

32. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
33. label:"112"
34. }])

canDown

说明:默认canDown为true，当canDown为true的时候图片/文字区域可以进行下拉；当canDown为false的时候图片/文字区域禁止下拉。版本支持：JSSDK1.18测试case：同hasContent参数示例

1. var slider = appcan.slider({
2. selector:'#slider',
3. hasIndicator:false,
4. aspectRatio:16/16,
5. canDown:false,
6. });
7. slider.set([{
8. img :"css/res/28364.jpg",
9. }, {
10. img : "css/res/28365.jpg",
11. }, {
12. img : "css/res/28364.jpg",
13. }, {
14. img : "css/res/28365.jpg",
15. }, {
16. img : "css/res/28364.jpg",
17. }])
18. slider.on("clickItem",function(index,data){
19. console.log(index,data);
20. })

hasCircle

说明：默认hasCircle为true，当hasCircle为true的时候在图片/文字区域显示圆点位置提示标志；当hasCircle为false时不显示相关说明：site 设置圆点提示标志的位置，默认情况下site水平居中，'Right'圆点提示标志位于右边，'Left'圆点提示标志位于左边版本支持：JSSDK1.18测试case：同hasContent参数示例

1. var slider = appcan.slider({
2. selector : '#slider',
3. hasIndicator:false,
4. aspectRatio:16/16,
5. hasCircle:true,
6. site:'Right',
7. });
8. slider.set([{
9. img :"css/res/28364.jpg",
10. }, {
11. img : "css/res/28365.jpg",
12. }, {
13. img : "css/res/28364.jpg",
14. }, {
15. img : "css/res/28365.jpg",
16. }, {
17. img : "css/res/28364.jpg",
18. }])
19. slider.on("clickItem",function(index,data){
20. console.log(index,data);
21. })