導讀
經過這段時間的學習，大家對小程序的編程和代碼掌握的如何了呢？
今天我們來講小程序裡實現輪播圖的方法，大家要專心看哦。
<swiper>組件/<swiper>
這個組件叫做滑塊組件，嗯，聽起來還挺形象的，你看滑動輪播圖的時候是不是就像滑動一個個方框的一樣？
首先，按著老規矩，我們需要先打開微信小程序開發者文檔，看一下關於swiper組件的相關內容：
這裡要說一下，跟swiper有關的還有這個swiper-item的組件，這個組件和swiper是一塊使用的，這個組件可以放一些東西進去。
如上面所述，我們的代碼開始編寫了，首先，需要把swiper和swiper-item的代碼寫進去。
<code>參考代碼：
<swiper>
<swiper-item>
/<swiper-item>
/<swiper>/<code>
那麼，該如何插入第一張圖片並讓這個圖片有鏈接反應呢？
這裡需要多幾層嵌套代碼，其實不難理解，<navigator>的意思的鏈接，我們鏈接到logs頁面上去，<navigator>下面是<image>圖片，我們用的是網絡圖片，複製網絡圖片的圖片地址即可。/<image>/<navigator>/<navigator>
<code>參考代碼：
<swiper>
<swiper-item>
<navigator>
<image>
/<navigator>
/<swiper-item>
/<swiper>/<code>
那麼，該如何搞多幾張圖片，讓他們實現輪播呢？
簡單來說，就是講<swiper-item>裡面的內容複製個幾份即可，但是要放在<swiper>裡面才可以。/<swiper>/<swiper-item>
我們給每一張圖片都換個背景。
可以看到，現在的小程序已經實現成功了這輪播的效果。
進一步修改
我們給.banner加一個樣式，剛才設定了樣式，我們現在來對樣式加個規範。
這裡我們設置banner有一個1像素寬的紅色的實線邊框，然後寬為100%，高為200像素。
<code>參考代碼：
.banner{
border: 1px solid red;
width: 100%;
height: 200px;
}/<code>
我們再給這個圖片設置個樣式：
<code>參考代碼：
.banner image{
width: 100%;
height: 100%;
}/<code>
效果如下，當然，我們可以打開調試器，在wxml裡面可以看到他能規定的內容區域。
當然，我們對這個瞭解下即可，我們可以把這個調整回來，大小根據實際情況調整一下即可。
<swiper>組件的indicator-dots屬性：顯示指示點/<swiper>
這個有什麼用呢？看看加上的效果就知道了：
有沒有發現，輪播圖上有了堆小點點，這些小點點可以讓我們清楚的看到有多少張圖片。
<code>參考代碼：
<swiper>/<code>
但是大家有沒有發現，現在的顏色真的很難看，是這種黑色的，遇到深色的就完全看不清了，那麼，這種怎麼解決呢？
<swiper>組件的indicator-color和indicator-active-color屬性：調整指示點顏色和選中指示點的顏色/<swiper>
我們在這裡試一下，將指示點顏色調整為白色。（indicator-color）
（255,255,255）是白色，0.3是透明度了。數字越大越不透明。越小越透明。
<code>參考代碼：
<swiper>/<code>
可以很清楚的看到效果，頁面裡的顏色變成了純白的透明色，同樣的，我們來設置一下選中指示點的顏色：（indicator-active-color）
<code>參考代碼：
<swiper>/<code>
<swiper>組件的autoplay屬性：自動切換/<swiper>
這個就其實挺簡單了。我們之間在裡面加上一個autoplay就可以了，可以看到，現在的顯示器上就已經實現自動切換了。
那麼，有的小夥伴就會問了，要是先修改輪播圖的切換時間怎麼辦？
<swiper>組件的interval屬性：調整輪播圖自動切換的時間/<swiper>
這裡面我們可以修改時間的長短，默認的5000毫秒，我們可以修改的時間更短或更長。單位是毫秒。
<code>參考代碼：
<swiper>/<code>
這個大家可以自己去試試，挺有意思的。
寫在最後
本章節分為兩節來講解，這裡是上，我們將會在明天說下，下節更精彩哦。
感謝您在百忙之中抽出時間來看小編的這篇文章，你的關注和點贊就是對小編最好的支持，謝謝大家了。
未來的章節會更加精彩，希望大家同小編能不見不散。
閱讀更多 馬蹄谷 的文章
