微信小程序 轮播图

wxml：

<view class="banner-box">
  <swiper class="home-banner swiper" indicator-dots="true" autoplay="true" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="rgba(255,255,255,1)" circular='true' interval="3000" duration="1000">
    <block wx:key="unique" wx:for="{{slider}}" wx:for-index="index">
      <swiper-item>
        <image class="banner-img" src="{{item.img}}" bindtap='clickBanner' data-id="{{item}}" data-banner="{{item}}" data-index="{{index}}" class="slide-image" mode="aspectFill" />
      </swiper-item>
    </block>
  </swiper>
</view>

wxss：

/*  strat 轮播图 */
.banner-box {
  background-color: #fff;
  height: 300rpx;
  overflow: hidden;
}

.home-banner {
  width: 100%;
  height: 300rpx;
}

.home-banner image {
  width: 100%;
  height: 100%;
}

/* end 轮播图*/

js：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    slider:[ //假数据
      {'img':'/pages/img/123.jpg'},
      { 'img': '/pages//img/123.jpg' },
      { 'img': '/pages/img/123.jpg' },
      { 'img': '/pages/img/123.jpg' },
      { 'img': '/pages/img/123.jpg' },
      { 'img': '/pages/img/123.jpg' }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})