微信小程swiper元件實作圖片輪播切換功能教學

本文主要介紹了微信小程使用swiper元件實現圖片輪播切換顯示功能,涉及swiper組件相關屬性使用技巧,希望能幫助到大家。

1、效果顯示

2、關鍵程式碼

index.wxml：

<swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;">
 <swiper-item>
 <image src="../../pages/images/img1.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img2.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img3.png" style="display: block;height: 300px;"/>
 </swiper-item>
</swiper>

swiper元件屬性說明如下：

#

屬性名稱	類型	預設值	說明	最低版本
indicator-dots	Boolean	#false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色	1.1.0
indicator-active-color	Color	#000000	目前選取的指示點顏色	1.1.0
autoplay	Boolean	false	#是否自動切換
				############################ #current######Number######0######目前所在頁面的index#########
interval	Number	5000	自動切換時間間隔
duration	Number	#500	#滑動動畫時長
circular	Boolean	false	是否採用銜接滑動
				##################################### ########vertical######Boolean######false#######滑動方向是否為縱向#########
bindchange	EventHandle		#current 改變時會觸發change 事件，event.detail = {current: current, source: source}

#如何用js實作網頁圖片輪播

JQuery圖片輪播效果的實作實例

jQuery簡單自訂圖片輪播外掛程式及用法範例

以上是微信小程swiper元件實作圖片輪播切換功能教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！