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素材可以使用和自由定制。在这里,你会发现可供
  11. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
  12. label:"123"
  13. }, {
  14. note:'2如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案。有很多的预先设计的网站模板PSD素材可以使用和自由定制。在这里,你会发现可供
  15. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
  16. label:"456"
  17. }, {
  18. note:'2如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案。有很多的预先设计的网站模板PSD素材可以使用和自由定制。在这里,你会发现可供
  19. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
  20. label:"789"
  21. }, {
  22. note:'如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案。有很多的预先设计的网站模板PSD素材可以使用和自由定制。在这里,你会发现可供
  23. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
  24. label:"101"
  25. }, {
  26. note:'如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案。有很多的预先设计的网站模板PSD素材可以使用和自由定制。在这里,你会发现可供
  27. 下载的超级棒的免费网站模板。你可以使用它们来创建自己的网站或只是寻找灵感',
  28. label:"112"
  29. }])
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. })