转自： https://zhuanlan.zhihu.com/p/33020360
WXML

<view class='wrap-swiper'>
          <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" current="{{current}}" bindchange='testDetails' indicator-active-color='#fff'>
            <block wx:for="{{imgUrls}}" wx:key="key">
         <swiper-item>
           <image src="{{item}}" class="slide-image" width="355" height="150" />
         </swiper-item>
            </block>
          </swiper>
          <view class="wrap">
           <button bindtap='nextPage'>跳转下一题</button>
          </view>
        </view>

WXSS

swiper{
  width: 80%;
  margin: 0 auto;
  margin-top: 20%;
  padding-top: 25px;
}
.wrap{
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
}
.wrap-swiper{
  background: rgba(0,0,0, 0.1) ;
  padding-bottom: 25px;
  margin-left: 15px;
  margin-right: 15px;
}

JS

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true, //  是否显示面板指示点
    autoplay: false, // 是否自动切换
    circular: true, // 是否采用衔接滑动
    current: 0, // 当前所在页面的 index
    interval: 500, // 自动切换时间间隔
    duration: 500 // 滑动动画时长
  },
  testDetails (e) {
    console.log(e)
    if (e.detail.source == 'autoplay') {
      this.setData({
        autoplay: false
      })
    }
  },
  nextPage () {
    // 跳转下一题
    this.setData({
      autoplay: true
    })
  }
})

运行效果

参考

小程序内置组件swiper，circular（衔接）使用小技巧(地址)