国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 應用 > 圖文處理 > 正文

Axure RP Pro 7.0怎么制作圖片輪播按鈕效果?

2024-07-16 16:58:10
字體:
來源:轉載
供稿:網友

當下幾乎所有大小網站都有輪播圖展示功能,你還可以用鼠標點擊輪播圖上的按鈕來切換圖片;當你需要制作帶按鈕控制的輪播圖效果時,往往會上網搜索制作方法,但很難找到詳細步驟說明和演示,本人也經歷過欲找教程但屢次無果的痛苦,因此在這里跟大家詳細描述每個實現步驟,力求讓每位小白無須動腦袋、無條件看完就會。

1、新建輪播區域:從元件庫(也稱為部件庫)中拖"動態面板"元件到編輯區,設寬度為500px,高度為200px,如下圖:

axure,圖片輪播

2、添加面板狀態:鼠標右鍵點擊“動態面板”,在彈出菜單中選擇“管理面板狀態”,給動態面板命名,并添加3個面板狀態,分別為“第1張輪播圖”、“第2張輪播圖”、“第3張輪播圖”,如下圖:

axure,圖片輪播

3、編輯輪播面板:在“動態面板狀態管理”彈出框中,點擊按鈕編輯新添加的3張狀態面板(按鈕見附圖,紅框已標出),如下圖:

axure,圖片輪播

4、添加輪播圖片:在“第1張輪播圖”的標簽頁里開始編輯,首先元件庫(也稱為部件庫)里將“圖片”元件拖至編輯窗口內,并將位置和大小設置為0,將寬度和高度分別設置為500px、200px;鼠標雙擊已設置好的“圖片”元件,會彈出對話框讓你從電腦中選擇圖片,從而完成添加第1張輪播圖;

依次在“第2、3張輪播圖”標簽頁編輯中采用相同的操作,依次拖入“圖片”元件并完成相同參數設置,依次添加完第2張輪播圖,第3張輪播圖。教程中采用的輪播圖分別為:windows XP、Windows 7、Windows8的經典桌面圖片;如處圖所示:

axure,圖片輪播

axure,圖片輪播

axure,圖片輪播

axure,圖片輪播

5、添加控制按鈕:在“第1張輪播圖”的標簽頁里開始添加控制按鈕(從元件庫中拖3個“矩形”元件制作成按鈕即可),并對當前輪播圖按鈕進行突出顯示;添加成功后,依次在第2、3張輪播圖標簽頁編輯操作;如下圖所示:

axure,圖片輪播

axure,圖片輪播

axure,圖片輪播

6、設置輪播效果:這一步是核心的步驟,請你按以下圖文描述一步步操作;

1)鼠標雙擊站點地圖根目錄(即圖中home頁面),會打開home頁編輯窗口;

2)鼠標點選“動態面板”區域,在Axure軟件界面右邊“部件交互與注釋”窗口,點擊“載入時”會彈出名為“用例編輯器”的對話窗口;

3)鼠標單點“設置面板狀態”,在“配置動作”操作界面,選擇狀態為"Next",勾選“從最后一個到第一個循環”,勾選循環間隔狀態,并將間隔時間設置為2000毫秒;并點擊確保保存;如下圖所示:

回到home頁面編輯窗口后,你在菜單欄中,依次點擊“發布”、“預覽”,就會在瀏覽器中看到你設置的輪播圖片,每2000毫秒循環輪播到下一張圖片;

axure,圖片輪播

axure,圖片輪播

7、設置按鈕控制效果:實現輪播圖片效果后,讓我們再接再厲將按鈕控制效果也加上,操作步驟如下:

1)在“第1張輪播圖”的標簽頁里開始編輯,鼠標點擊“按鈕1”,在“部件交互與注釋”窗口,鼠標雙擊“鼠標單擊時”狀態選項,會彈出名為“用例編輯器”的對話框;

2)在“點擊新增動作”區域鼠標單點“設置面板狀態”,在“配置動作”操作界面,選擇狀態為我們此前命名的"第1張輪播圖";

3)在“點擊新增動作”區域鼠標單點“等待”,在“配置動作”操作界面,將等待時間設為2000毫秒;

4)在“點擊新增動作”區域鼠標單點“設置面板狀態”,在“配置動作”操作界面,選擇狀態為"Next",勾選“從最后一個到第一個循環”,勾選循環間隔狀態,并將間隔時間設置為2000毫秒;并點擊確保保存;

就此,你完成了在“第1張輪播圖”標簽頁第1個按鈕的操作設置,然后以同樣的方法針對第2、3個按鈕進行類似設置,有一點不同時,在2、3按鈕的“配置動作”設置中,選擇狀態分別為對應的"第2張輪播圖"、"第3張輪播圖";

完成上述操作后,再分別打開“第2、3張輪播圖”標簽頁對其中的3個按鈕分別進行相同的操作設置;如下圖所示:

axure,圖片輪播

axure,圖片輪播

axure,圖片輪播

axure,圖片輪播

axure,圖片輪播

注意事項:

1、教程中動態面板區域的尺寸為:500px*200px

2、教程中準備的輪播圖片尺寸為:500px*200px

3、點擊按鈕時圖片會自動跳到對應頁面,在2000毫秒后,會繼續循環輪播下去


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 洪泽县| 云霄县| 宁南县| 二手房| 临高县| 镇远县| 赤城县| 酒泉市| 惠水县| 宾川县| 长子县| 延长县| 清苑县| 高阳县| 利川市| 北票市| 新化县| 鲁甸县| 江都市| 敖汉旗| 满城县| 芒康县| 宿州市| 瑞丽市| 容城县| 通州市| 赣州市| 大渡口区| 金阳县| 奉化市| 星子县| 栖霞市| 泸溪县| 临邑县| 克东县| 东明县| 通榆县| 德昌县| 广州市| 略阳县| 临夏市|