微信小程式輪播圖的實現是利用了swiper元件（滑塊檢視容器）。

• 主要引數如下：

• js檔案程式碼如下：

data: {
    imgUrls: [
      'http://p1.image.hiapk.com/uploads/allimg/150709/7730-150F9102Q9.jpg'
 
,
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,  //是否顯示面板指示點
    autoplay: true,      //是否自動切換
    interval: 3000,       //自動切換時間間隔
    duration: 1000,       //滑動動畫時長
    inputShowed: false,
    inputVal: ""
 

  }

• wxml檔案程式碼如下：

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

wxss程式碼如下：

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

• 效果圖如下：