对于前端工程师来说，轮播图并不陌生，无论是通过position 还是通过tansform，再配合js中的setInterval()都可以实现，但是轮播图的难点就是无缝衔接。
而微信小程序提供的swiper组件可以很快的做出一个无缝衔接的轮播图。
先简单介绍一下swiper组件
（以下内容转自官方http://developers.weixin.qq.com/miniprogram/dev/component/swiper.html）
根据官方文档，我们可以用下列代码生成一个轮播图：
<!-- wxml -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'> <block wx:for="{{bnrUrl}}" wx:for-index="index"> <swiper-item> <image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image> </swiper-item> </block> </swiper> <!-- wxml --> //js
Page({
data: { "bnrUrl": [{ "url": "img/1242x366-1531449084.jpg" }, { "url": "img/1242x366_djj_0706-1530871651.jpg" }, { "url": "img/1242x366_lyx_0709-1531122892.jpg" }, { "url": "img/14540040236323_1_o.jpg" }] } }); //js //wxss
.u-wrp-bnr { width: 100%; height: 200rpx; display: block; position: relative; top: 100rpx; background: #f0f0f0; } .u-img-slide { width: 100%; height: inherit; } //wxss 主要用到了几个属性：
| 属性 | 功能 |
|---|---|
| indicator-dots='true' | 面板指示圆点 |
| autoplay='true' | 自动播放 |
| interval='5000' | 每次轮播间隔 |
| duration='1000' | 轮播动画时长 |
| circular='true' | 无缝衔接 |
我的解释可能和官方的有所出入，但意思基本差不多。