淘寶中經??梢钥吹降赇佒械膱D片輪播效果,本經驗將通過axure7.0實現。
1、下載需要輪播的圖片
2、將圖片引入至axure中,將引入的第一張圖片轉為動態面板
3、將動態面板添加四個狀態,分別為狀態1,狀態2,狀態3,狀態4,每個狀態中添加上面的圖片做背景
4、我們在頁面處添加頁面載入事件,使頁面載入完成后,就開始不斷的按順序切換這個動態面板的狀態,此時就可以看到圖片如淘寶示例那樣不斷切換;接下來我們做一點有意思的事
5、添加四個矩形,設置選中組,選中后背景色變為橙色;透明度設置為50%
6、對所有矩形添加事件,當鼠標移入時,該矩形變為選中狀態,圖片輪播的動態面板狀態切換為改矩形的狀態;當鼠標移出是,該矩形變為未選中狀態,圖片繼續按順序切換這個圖片輪播動態面板的狀態
7、運行后,就有了類似淘寶的圖片輪播的效果,而且,鼠標移入后右下角的矩形后,圖片可變為矩形對應的圖片,移出鼠標后,圖片繼續輪播
相關推薦:
axure RP 8怎么做圖片輪換的效果?
Axure RP 8怎么制作一個旋轉的圓角圖片?
Axure RP 8設怎么用按鈕控制圖片的顯示與隱藏?
新聞熱點
疑難解答