中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

怎么使用Axure軟件來制作banner輪播圖的交互效果呢？這篇文章里，作者做了案例分享和步驟梳理，一起來看看吧。

哈嘍，大家好！今天給大家介紹如何使用Axure軟件制作banner輪播圖的交互效果。

【案例預覽地址含下載】電腦打開鏈接：https://wh9x1s.axshare.com/

【完整案例作品預覽含下載】：https://fx2z9z.axshare.com

一、案例介紹

【視頻教程】：嗶哩嗶哩視頻

首先，讓我們來看下效果展示：進入頁面后自動輪播圖片、左右滑動也可以輪播圖片以及點擊任意圓點切換圖片。接下來，我們看下如何制作。

【效果預覽】

二、案例步驟

本次教程將分為三個步驟進行講解：

1. 自動輪播圖片；
2. 左右滑動輪播圖片；
3. 點擊圓點切換圖片。

1. 自動輪播圖片

這里我提前準備了四張圖片作為輪播圖素材。首先拖入一張圖片到Axure軟件，并將其轉換為動態面板，命名為“輪播圖”。

雙擊進入到創建好的動作面板中。在這里新增多個面板狀態，并依次拖入剩余三張圖片。

接下來單擊“輪播圖”動態面板，選擇“載入時”的交互事件，添加“等待”動作，設置等待時間為1000毫秒。

然后添加“設置面板狀態”，點擊“當前元件”，選擇狀態為“Next”、進入動畫和退出動畫選擇“向左滑動”、點擊“向后循環”，點擊“確認”。

以上“自動輪播圖片”效果就做完了，我們預覽看下效果。可以看到效果已經實現了。

接下來我們看下如何制作“左右滑動輪播圖片”效果？

2. 左右滑動輪播圖片

首先單擊“輪播圖”動態面板，選擇“向左拖動結束時”的交互事件，添加“設置面板狀態”，點擊“當前元件”，選擇狀態為“Next”、點擊“向后循環”，進入動畫和退出動畫選擇“向左滑動”，點擊“確認”。

接下來我們做向右拖動播放輪播圖的效果，這里可以直接復制“向左拖動結束時”的交互事件“到向右拖動結束時”的交互事件上，并點擊進入粘貼好的交互事件中，將選擇狀態“Next”修改為“上一個（previous）”，然后進入動畫和退出動畫改為“向右滑動”，點擊“確認”。

以上“左右滑動輪播圖片”的效果就做完了，我們看下預覽效果，可以看到效果已經實現了。

接下來我們看下如何制作“點擊切換輪播圖”效果？

3. 點擊圓點切換圖片

首先我們新建四個圓點，調整好位置。并依次命名為1、2、3、4。這里還需要對所有圓點設置被選中的樣式。全選四個圓點，設置圓點被選中的的樣式，修改填充顏色添加外部陰影，點擊“確認”。

接下來選中第一個圓點，選擇“鼠標單擊時”的交互事件，點擊“設置選中”，選中圓形“1”，設置值為“ture”。

接著添加“設置面板狀態”，選中“輪播圖”動作面板，選中狀態為“state1”，進入動畫和退出動畫選擇向左滑動”，點擊“確認”。

接下來，再添加“設置面板狀態”，選中“輪播圖”動作面板，選擇選中狀態為“停止循環”，并添加等待動作，時間為5000毫秒。

然后再添加“設置面板狀態”，選中“輪播圖”動作面板。選擇選中狀態“Next”、點擊“向后循環”，進入動畫和退出動畫選擇“向左滑動”。

因為點擊各圓點需要展示對應的輪播圖，這里復制“1”的交互事件，粘貼到圓點2、圓點3、圓點4上。

然后點擊圓點“2”，將選中狀態改為圓點“2”，“輪播圖”動作面板的選擇狀態修改為state2，其他設置保持不變，然后再點擊圓點3，將選中狀態改為圓點“3”，“輪播圖“動作面板的選擇狀態改為state3，其他設置保持不變，以此類推。修改好后。

我們預覽看下效果，可以看到點擊切換輪播圖效果已經完成了。

但是這里我們可以看到當選擇一個圓點后，后面選擇其他圓點，之前選擇的圓點還處于選中狀態。這個問題我們該如何解決呢？

回到頁面中，首先選擇所有圓點，設置選擇組名稱為“圓點2”。這樣就達到了單選互斥的效果。接下來我們預覽看下效果，可以看到當選中一個圓點后，其他圓點自動進入到未選中狀態，這樣效果就完成了。

現在還剩最后一個問題？當圖片輪播時圓點選中狀態并不會隨著變化，這個問題我們看下如何解決？

回到頁面，單擊“輪播圖”動態面板，選擇“狀態改變時”的交互事件，點擊“設置選中”，選中“圓點1”，設置選中狀態值為“true”。

然后再點擊“編輯條件”，設置面板狀態 this=狀態 state1，設置好后。

接下來，設置當圖片輪播到第二張、第三張、第四張時，對應圓點2、3、4將變成選中狀態。

在“狀態改變時”的交互事件中可以再復制粘貼三個條件，并修改條件2的面板狀態 this為狀態 state2、對應修改選中狀態為圓點2；然后再修改條件3的面板狀態 this為狀態 state3，對應修改選中狀態為圓點3。以此類推，修改好后。

我們看下預覽效果，圖片輪播時圓點選中狀態會跟著變化，這樣效果實現了。

以上就是本次教程的全部內容，那我們下期再見啦！