微信小程序之轮播图的实现（附效果图和源码）

不管是做APP开发还是小程序，移动端离不开轮播图的功能，下面就写一个小程序的轮播图功能分享给大家

效果图：

carousel.png

step1:页面index.wxml代码

step2:配置信息

//index.js
Page({
  data: {
    //轮播图配置
    autoplay: true,
    interval: 3000,
    duration: 1200
  },
  onLoad: function () {
    var that = this; 
    var data = {
      "datas": [
        {
          "id": 1,
          "imgurl": "../../images/a1.jpg"
        },
        {
          "id": 2,
          "imgurl": "../../images/a2.jpg"
        },
        {
          "id": 3,
          "imgurl": "../../images/a3.jpg"
        },
        {
          "id": 4,
          "imgurl": "../../images/a4.jpg"
        }
      ]
    }; 
    that.setData({
      lunboData: data.datas
    })
  }
})

step3:样式文件

/**index.wxss**/

/*轮播控件*/

.home-swiper {
  width: 95%;
  height: 360rpx;
}

.slide-image {
  width: 100%;
  height: 100%;
}

GitHub项目源代码及下载地址：轮播图

其它文章请访问：

• 微信小程序之自定义组件
• 微信小程序之根据经纬度反查地址
• 微信小程序之转发功能（附效果图和源码）
• 微信小程序之轮播图的实现（附效果图和源码）
• 微信小程序之tab的实现（附源代码和效果图）
• 微信小程序之多列表的显示和隐藏功能（附源码）