一、輪播banner需求分析：

給3張圖片編號，分別是1，2，3

1、每隔4s,播放順序: 1，2，3，1，2，3...

第i張播放i+1,若i+1=n+1,則改為1；相當一直向左邊滑動

同時對應的點為選中狀態

2、1向左滑動展示2，向右滑動展示3；

2向左滑動展示3，向右滑動展示1；

3向左滑動展示1，向右滑動展示2；

展示哪張，哪張對應圓點為選中狀態。

3、推斷和總結：設一共有n張圖，編號1，2，..., i, n;

1<i <n向左滑動展示i+1,向右滑動展示i-1;

i= 1向左滑動展示1+1,向右滑動展示n;

i= n向左滑動展示1,向右滑動展示n-1;

等價于：1<＝i <＝n 向左滑動展示i+1, 向右滑動展示i-1;

若i+1 = n+1則改為1；若i-1 = 0則改為n.

二、結構組成：動態面板（有三種狀態，每種狀態為一張圖片，共三張）＋三點圓組合

其中，圓組合放在動態面板上。

圖 1 輪播面板結構

圖 2 ?圓組合的設置

三、交互事件

1 動態面板處理手動向左滑動，向右滑動的動效

圖 3 輪播面板處理滑動動效

2 動態面板處理載入時自動輪播的動效

圖 4 輪播面板處理自動輪播的動效