导语：
对于前端工程师来说，banner图是前端开发中必不可少的一部分。但是对于缺少了DOM的小程序来说该如何实现banner图呢？就像其他的框架封装不同的banner图的方法，小程序也封装了banner的方法，下面我们看看具体实现方法。
（学习视频分享：编程入门）
一：准备工作
我用两张图吧，如下所示：
1.jpg
2.jpg
二：编写xsml代码（即html）
方科网络ERP图文店
下载
方科网络ERP图文店II版为仿代码站独立研发的网络版ERP销售程序。本本版本为方科网络ERP图文店版的简化版，去除了部分不同用的功能，使得系统更加精炼实用。考虑到图文店的特殊情况，本系统并未制作出入库功能，而是将销售作为重头，使用本系统，可以有效解决大型图文店员工多，换班数量多，订单混杂不清的情况。下单、取件、结算分别记录操作人员，真正做到订单全程跟踪！无限用户级别，不同的用户级别可以设置不同的价
在这里我们要是用
这些属性足够我们使用，我们为了是xsml页面简洁，所以我在这里使用了for循环，将使用到的资源放进js中进行循环。而且为了使数据可进行双向绑定，所以他的属性值我打算放到js中进行配置。我的xsml代码如下：
三：js的配置
由于是双向绑定，所以我们只要在js中进行配置需要的参数即可。由于我的两张图片使用的是1.jpg和2.jpg，所以我只需要在js中进行一个小小的循环即可，这个分情况而定，你么也可以把图片的地址直接放到数组里面；最后改好了之后记得setData一下，，不然没效果，js代码如下：
Page({
/**
* 页面的初始数据
*/
data: {
mode:"scaleToFill",
arr:[],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 1000,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var array = this.data.arr
for (let i = 1; i < 3; i++) {
array.push("img/" + i + ".jpg")
}
this.setData({ arr: array})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
})好了，，我们来看一下最终效果：
相关推荐：小程序开发教程
