首先，我們先來看一下要實現的案例效果。
上面這張圖，我們基本上能看出來這個案例要實現的交互。
1、同一區域有四張廣告圖片進行不停的切換；
2、廣告圖片對應的底部圓點標籤同步被選中。
按照以往大多的實現方式，是在一個動態面板的多個狀態中放置不同的圖片，開啓動態面板的循環功能，並且在動態面板狀態切換時，通過判斷當前是哪一個狀態，選中對應的圓點標籤。
這種常用的方式有個小問題，就是圓點標籤選中的切換是在圖片切換的動畫之後。
在這裏，我們換一種方式。
我的思路是這樣的：
1、讓底部的圓點標籤有唯一選中的效果；
2、每一個圓點標籤選中時都做三個動作，設置動態面板狀態爲對應的狀態、等待一定時長以及選中下一個圓點標籤；
3、頁面打開時，選中第一個圓點標籤，這樣就能開啓幻燈片的輪流播放。
接下來，我們先準備好元件，併爲元件命名。
然後，我們一起來看實現步驟。
1、先讓圓點標籤有唯一選中的效果。
我們需要做三件事，來完成這個需求，這裏我們先完成其中的兩件。
- 全選圓點標籤，爲它們設置一樣的【選中】時的交互樣式；這一步是爲了圓點標籤變爲選中狀態時能夠改變顏色。
- 繼續在上一步的功能界面中，爲全部圓點標籤【設置選項組名稱】爲“Tag”；這一步是爲了讓一組圓點標籤中，只有一個能夠變爲選中狀態。
2、我們給任意一個圓點標籤添加交互，以第一個圓點標籤“Tag1”爲例。
在圓點標籤被【選中時】，要將動態面板“SlidePanel”切換到對應的狀態從而顯示對應的廣告圖片。
這裏大家注意，【設置面板狀態】的動作設置中，我們要將目標元件“SlidePanel”的狀態選擇爲【Value】，也就是值。
選擇之後，在下方出現了新的設置“狀態名稱或序號”，也就是說我們可以通過動態面板狀態的名稱或序號，將動態面板切換到指定的狀態。
這裏我們要用的是序號。
動態面板狀態的序號就是在概要面板中，各個狀態由上至下排列的順序號。
也就是當我們點擊圓點標籤“Tag1”的時候，要把動態面板切換到序號爲“1”的狀態；
點擊圓點標籤“Tag2”的時候，要把動態面板切換到序號爲“2”的狀態；以此類推。
那麼，這個序號我們可以填寫固定的數字。
不過，大家能夠看到圓點標籤名稱的最後一位字符就是與序號相同的數字，如果我們取到這個數字，填在輸入框中，也可以完成這個設置。
這個數字我們可以通過公式“[[This.name.slice(-1)]]”來獲取。
公式中“This.name”可以獲取到當前被選中的圓點標籤的名稱。
而“.slice(-1)”是字符串截取函數，它可以輸入兩個參數（截取的起始位置和終止位置），也可以輸入一個參數（截取的起始位置）；當只輸入一個參數時，能夠對字符串對象從起始位置截取到末尾；並且。這個函數的參數可以爲負數，輸入負數的話，是從末尾進行倒數的位置；這裏的“-1”，表示倒數第1位字符。
所以，公式“[[This.name.slice(-1)]]”的意思是獲取“當前元件的名稱的最後一位”。
填入公式之後，我們再設置一下狀態切換的動畫，就完成了這個動作。
3、繼續上一步，我們再添加一個【等待】的動作，以便等待“2000”毫秒後，選中下一個標籤。
4、繼續上一步，添加【選中】下一個圓點標籤的動作，因爲是在給第1個圓點標籤“Tag1”添加交互，這裏我們選中下一個圓點標籤就是“Tag2”。
這一步，就是圓點標籤唯一選中效果要做的第3件事，把圓點標籤變爲選中狀態。
5、完成了上面的幾步之後，我們把第1個圓點標籤【選中時】的交互複製，粘貼給其它三個圓點標籤。
粘貼之後，從第2個圓點標籤開始，逐一修改最後一個選中圓點標籤的動作，爲選中當前圓點標籤的下一個標籤。
6、爲第1個圓點標籤的【載入時】添加交互，【選中】當前這個圓點標籤。
這樣，在頁面打開後，第1個圓點標籤會被選中，從而觸發第1個圓點標籤的【選中時】交互，通過運行交互中的動作，在完成動態面板的狀態切換以及等待2秒鐘的動作之後，又通過最後一個【選中】下一個圓點標籤的動作觸發了下一個圓點標籤【選中時】的交互。
以此類推，形成了循環的效果。
以上就是整個案例的實現過程。