微信小程式輪播圖的是通過元件swiper來實現的

swiper 又叫 滑塊檢視容器

很多時候，我們只做頁面的時候都會用到圖片的輪播效果，剛開始接觸的時候也不會弄，所以直接進入主題，製作一個超簡單粗暴的輪播圖試試。

1. 新建一個專案，在所以需要新增輪播圖的介面（.wxml 檔案）新增內容

2. 新增一個swiper元件，swiper元件中包含三個<swiper-item></swiper-item>標籤，用<swiper-item></swiper-item>來裝載輪播的圖片（<image></image>標籤）

.wxml 程式碼如下：

<swiper indicator-dots='true' autoplay='true'>
  <swiper-item>
    <image src='/images/iqiyi.png'></image>
  </swiper-item>
  <swiper-item>
    <image src='/images/vr.png'></image>
  </swiper-item>
  <swiper-item>
    <image src='/images/wx.png'></image>
  </swiper-item>
</swiper>
 

.wxss （樣式）程式碼如下：

swiper{
  height: 600rpx;
  width: 100%;
}
swiper image{
  height: 600rpx;
  width: 100%;
}

 效果圖如下：（因為不是動圖，就用兩張圖片展示啦）

這樣子簡單的輪播圖就完成啦！

解釋一下程式碼以及引數的使用：

indicator-color 為true的效果（底部可展示出小點點的效果）

注意：如果想要新增本地圖片的就需要注意了，這裡微信開發工具不支援在專案目錄下直接新增檔案，所以我們就選中檔案目錄，滑鼠右擊開啟點開啟硬碟，回到專案的本地目錄下，建立一個圖片目錄（images）放置我們的圖片即可，微信開發工具會自動識別專案下的目錄和檔案的了。