91產品

先上京東官網原圖（也可以自己搜素京東官網檢視）

先分析一下這個介面，幾張圖片的滾動，中心位置偏下一個滾動條，由幾個橢圓和一個圓角矩形構成。

圖片滾動和橢圓顏色變化相對應，點選圖片連結至對應活動網頁。

1、滾動介面動畫

我們先匯入一張圖片到工作區，滑鼠右鍵選擇「轉化為建立動態面板」。

然後在頁面面板也就是右下角面板會有一個動態面板的分欄，滑鼠移動點選時會出現一個加號，也就是新增狀態。

雙擊建立兩個新的狀態，在每個狀態下新增一張圖片，我這裏就以3個狀態為例。

單擊動態面板在面板狀態找到互動分欄裏面的「載入時」事件，雙擊新增。

會彈出一個設定視窗，在原件欄中找到「設定面板狀態」，雙擊新增引數設定如下：

點選確定按F5預覽就會有一個簡單的滾動效果。

2、製作畫面中的3個白色橢圓與畫面繫結

點選index（或者home）右下角頁面那裏主要是爲了不在動態面板中建立橢圓。

然後在原件庫找到橢圓形移動到工作欄調整合適的大小複製3個調整到合適的位置，順手設定下圓形的邊框改成無邊框。

接下來就是重點了，我先講一下原理。

我們要做的是讓切換畫面順序跟3個橢圓的切換對應，對比京東官網可以看到切換到對應的圖片，對應的按鈕會變紅。

首先來製作按鈕變紅事件，點選第一個按鈕右鍵選擇 互動樣式。

在彈出的互動設定中選擇「 選中 」欄，勾選 填充顏色 選擇紅色

其他兩個橢圓的設定與第一個一致。

加下來就是讓第一張圖與橢圓1繫結，也就是說切換到第一張圖的同時橢圓1被選中變成紅色。

選中動態面板，在屬性中找到「 狀態改變時 」的事件， 雙擊 新增，在設定中選擇編輯條件選擇state1

點選確定。

之後在元件動作分欄找到「選中「動作雙擊新增，引數設定如下：

橢圓1設定「true「是表示當切換到圖片1時橢圓1被選中，前面我們已經設定了橢圓被選中時變成紅色，所以這裏橢圓1變成紅色。接下來就是一樣的設定，當然了 case2 把state換成 state2 ，橢圓1和3的值等於」false「橢圓2的值為」true「。橢圓3也是一樣的道理我就不上圖了。

最難的部分已經結束了下面來製作滑鼠移入圖片時停止滾動的動作。

還是點選動態面板，在屬性欄找到「 滑鼠移入時 」事件雙擊新增事件在彈出的設定框新增動作「 設定面板狀態 」在選擇狀態中下拉選擇 停止迴圈。

然後就是滑鼠移出時圖片繼續滾動的事件，一樣的找到「 滑鼠移出時 」的事件（動態面板上新增）雙擊新增，引數與之前設定的滾動引數一致。

如果你按F5預覽下畫面可以看到我們已經很接近成品了。

接下來，我們要讓滑鼠移入橢圓1時畫面切換到圖片1。

這個事件應該新增在橢圓1上，單擊橢圓1，在屬性中找到「滑鼠移入時」事件雙擊新增，在彈出的設定視窗選擇「設定面板狀態」，選擇狀態選擇「state1」。

因為滑鼠移入時畫面停止滾動所以只需要選擇 state1 （也就是圖片1）即可。同樣的橢圓2，橢圓3對應新增事件，選擇狀態為state2，state3即可。

3、為圖片設定超鏈接

雙擊 圖片1在屬性中找到「 滑鼠單擊時 」事件，雙擊新增，選擇「 連結 」分欄找到「 當前視窗 」單擊新增，設定如下：

在超鏈接中輸入你想轉到的網址，圖片2、3操作與1一致，只是網址不同罷了。

最後就是新增一個圓角矩形在3個橢圓的下面作為底色，調整透明度以及圓角。個人認為加了這個圓角矩形之後感覺順暢多了，下面是成品圖，個人第一次寫教程不喜輕噴。

附：原始檔百度雲連結：http://pan.baidu.com/s/1gfIeyzD 密碼：o2o4

本文由 @紅匏白臉 原創釋出於人人都是產品經理。

據說，只有打賞的纔是真粉絲哦，8塊8請小編喝杯咖啡吧，長按二維碼勾搭小編微信（ yueyingzheng88 )加入91運營社群，全年100多場免費公開課，定期問題答疑等著你，會運營的人都在這裏了！