五，首页轮播图的实现
我们这一节要来实现首页顶部的轮播图功能。老规矩，先看效果图
这里的云开发环境id，建议大家直接复制，不要手写，很容易写错的。
如上图所示，我们创建一个名为homeImgs的数据集合，用于存放首页轮播图的图片链接。
5-2，上传图片到云存储
我们的图片如果想动态更新，就要想办法把图片存储到云服务器里，云开发的云存储功能就为我们很好的存放图片。这里教大家如何把图片存储到云存储里。首先进入云开发控制台，找到云存储。
然后我们随便点击一个我们上传的图片，就可以拿到图片对应的链接了
但是这个https开头的链接有对应的有效期。所以我们的图片如果是在小程序里展示，建议大家使用这个cloud开头的图片链接。
如果我们首页轮播图想显示多个图片的话，就可以把我们多个图片链接都添加进来。
可以看到我们请求数据成功了，但是打印的时候却是空数据。这是因为我们的云开发数据库权限要设置成所有人可读。
这个时候我们添加的3条图片链接数据就可以全部请求到了。接下来我们就要把这些数据显示到页面上了
5-5，渲染顶部轮播图
我们要借助swiper和swiper-item组件在页面里渲染顶部轮播图，所以要在home.wxml里定义如下的代码。
这样我们的数据就可以在页面上显示出来了。
我把官方文档的链接给到大家：
https://developers.weixin.qq.com/miniprogram/dev/component/image.html这里的mode裁剪模式，大家可以根据自己的需求设置。
home.wxml代码如下：
可以看出，我们的图片这个时候撑满了屏幕，但是会有裁剪
这里也把对应的官方文档链接给到大家，大家可以根据自己的需求去做设置。
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html我这里只设置下面两个属性
- indicator-dots：显示指示点
- autoplay：自动轮播这样我们完整的轮播图功能就实现了。关于轮播图的点击和跳转，我们后面章节再做讲解，这节主要是带大家实现动态的轮播图功能。
