使用Axure制作無限循環展示圖片效果


一、實現的效果

如圖:

image

1、此次需要實現的效果是,進入界面后,在圖片展示區域的圖片根據事先設定好的時間,自動切換不同的圖片;

2、循環不間斷;

3、頁面不出現閃爍的現象。

 

二、做前工作

圖片:4張

軟件:Axure

 

三、制作流程

1、在開打的空頁面上添加一個動態面板(X:20 ,Y:20 ;W:600,H:382)如圖:

image

image

 

2、給動態面板取名為“動態廣告”,再在該動態面板上添加4個字狀態,分別取名為,圖01、圖02、圖03、圖04。如圖:

 

image

 

3、為每個狀態分別添加不同的圖片。如圖:

 

imageimage

imageimage

 

4、為了實現這個無限循環的效果,需要在主界面再添加一個隱藏的輔助動態面板,建議,將做輔助用的動態模板添加到展示圖片的動態面板上,這樣就不用占用頁面的其他位置了。

動態面板命名為“圖片循環輔助面板”

如圖:

image

image

image

 

5、給主頁面添加“頁面載入時”事件,設置界面加載時“圖片循環輔助面板”的相對距離為:(1,0),如圖:

image

image

 

6、設置“圖片循環輔助面板”的“移動”事件

image

image

 

image

image

image

 

7、制作完成,點擊“發布-生成HTML文件”,運行一下測試效果。

image

 

運行效果OK!大功告成!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM