今天我們來分享一下動態皮膚之輪播圖設定。先來個效果圖：

功能要求：

1、頁面載入時，自動輪播，不受切換tabbar影響；

2、圖片輪播時，下方有小圓點提示當前頁數及選中狀態；

3、點選某個小圓點，banner輪播圖直接顯示對應的圖片後，自動繼續輪詢播放；

4、左右滑動banner時，向上/向下顯示一張圖片，然後繼續輪詢播放；

5、點選某張圖片，跳轉到對應詳細頁面；

上面對應功能中，最難的應該是實現小圓點顯示狀態與banner輪詢圖片一致的功能。

第4點功能實現：可在頁面中、輪播圖動態皮膚新增兩個透明矩形，實現上一張/下一張功能。

第5點功能實現：在輪播圖的狀態皮膚中對圖片進行事件點選處理。

我們先來看看實現前面三點功能的思路：

1、在頁面A新建動態皮膚B，並且往B插入不同的banner圖片，在“頁面載入時”設定B迴圈輪播。

2、在頁面A（這點很重要，記得要和B同一級別，不要放在B檢視下）建立5個圓點，預設填充顏色為灰色，統一選中--右鍵--“設定選項組”，統一設定：互動樣式“選中”--填充顏色為白色；

3、點選B--在互動皮膚點選：“狀態改變時”--在彈出框中，修改“用例名稱”右側的“新增條件”，設定顯示banner1時，顯示小圓點1；顯示banner2時，顯示小圓點2；……5張圖一共新增5個示例。

說明：本文資料參考這裡1 和 這裡2，但由於原文開發工具版本不同以及部分描述不是很詳盡，因此加入了個人部分修改。

該文提供了兩種方法，前面介紹的是比較笨的方法，建議使用後面一種。兩種方法

方法1（易於理解的做法，但推薦方法2，可以直接跳過這個方法）：

 第一步：拖入動態皮膚，並命名為【輪播圖測試】，給動態皮膚新增三種狀態，分別命名為【banner1】、【banner2】、【banner3】;

第二步：雙擊動態皮膚，進入動態皮膚【banner1】編輯頁面；如圖，進入動態皮膚【banner2】【banner3】編輯頁面也是如此，分別給三個動態皮膚拖入矩形框，分別給三個動態皮膚裡面的矩形框填充不同的顏色(這裡新增了文字以便對應)，以示區分；如圖效果；

第三步：新增輪播小按鈕；分別在三個輪播圖裡面新增小按鈕，並分別填充紅色以示選中；如圖所示

第四步：實現自動輪播；點選【輪播圖測試】頁面；選中動態皮膚；右邊新增事件編輯欄——屬性——載入時——新增動作，如下圖，選擇 【設定皮膚狀態】——勾選【輪播測試圖】動態皮膚——選擇狀態【Next】——勾選【向後迴圈】——迴圈時間及進入動畫可以自行設定，然後確定提交即可；預覽，基本的輪播迴圈就實現了；

第五步：設定【按鈕控制效果】，進入動態皮膚【banner1】編輯頁面；

1.選中【按鈕1】——新增事件【等待】——設定等待時間為【1000】毫秒；

2.選中【按鈕2】——新增事件【設定皮膚狀態】——勾選【輪播測試圖】動態皮膚——選擇狀態為對應的【banner2】——進入動畫【向左滑動】時間為【3000】毫秒，退出動畫【向左滑動】時間為【3000】毫秒，然後確定即可；

繼續 新增事件【等待】——設定等待時間為【1000】毫秒；

繼續 新增事件 【設定皮膚狀態】——勾選【輪播測試圖】動態皮膚——選擇狀態為【Next】————勾選【向後迴圈】——迴圈時間及進入動畫可以自行設定，然後確定提交即可;

3.選中【按鈕3】——新增事件【設定皮膚狀態】——勾選【輪播測試圖】動態皮膚——選擇狀態為對應的【banner3】——進入動畫【向左滑動】時間為【3000】毫秒，退出動畫【向左滑動】時間為【3000】毫秒，然後確定即可；

繼續 新增事件【等待】——設定等待時間為【1000】毫秒；

繼續 新增事件 【設定皮膚狀態】——勾選【輪播測試圖】動態皮膚——選擇狀態為【Next】————勾選【向後迴圈】——迴圈時間及進入動畫可以自行設定，然後確定提交即可;

第五步：動態皮膚【banner2】、【banner3】裡面的按鈕效果時間設定和動態皮膚【banner1】一樣；但是，對應的在2、3按鈕的“配置動作”設定中，選擇狀態分別為對應的【banner2】、【banner3】；

點選執行，就可以實現自動輪播、點選按鈕切換了。

這個裡面的時間設定的有點長，如果要體驗好一些的話，大家自己設定一個合適的時間即可。

方法2（推薦）：