Slider图片轮播组件

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

依赖

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

JS对象

函数

appcan.slider({参数})

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

方法

set(data)

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

clickItem事件

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

change事件

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

例如

HTML5代码

<div id="slider" class="slider">
</div>

JS代码

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

hasContent

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

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

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

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

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

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

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

canDown

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

 var slider = appcan.slider({
 selector:'#slider',
 hasIndicator:false,
 aspectRatio:16/16,
 canDown:false,
});
slider.set([{
    img :"css/res/28364.jpg", 
}, {
    img : "css/res/28365.jpg",
}, {
   img : "css/res/28364.jpg",
}, {
    img : "css/res/28365.jpg",
}, {
    img : "css/res/28364.jpg",
}])
 slider.on("clickItem",function(index,data){
      console.log(index,data);
      })

hasCircle

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

var slider = appcan.slider({
 selector : '#slider',
 hasIndicator:false,
 aspectRatio:16/16,
 hasCircle:true,
 site:'Right',
});
slider.set([{
    img :"css/res/28364.jpg", 
}, {
    img : "css/res/28365.jpg",
}, {
   img : "css/res/28364.jpg",
}, {
    img : "css/res/28365.jpg",
}, {
    img : "css/res/28364.jpg",
}])
 slider.on("clickItem",function(index,data){
      console.log(index,data);
  })

还需要帮助吗? 联系我们

最新更新 8th Jul 2021