axure?

淘寶中經常可以看到店鋪中的圖片輪播效果,本經驗將通過axure7.0實現

工具/原料

axure7.0

方法/步驟

下載需要輪播的圖片

axure 動態面板實現圖片輪播效果(淘寶)

axure 動態面板實現圖片輪播效果(淘寶)

axure 動態面板實現圖片輪播效果(淘寶)

axure 動態面板實現圖片輪播效果(淘寶)

將圖片引入至axure中,將引入的第一張圖片轉為動態面板

axure 動態面板實現圖片輪播效果(淘寶)

將動態面板新增四個狀態,分別為狀態1,狀態2,狀態3,狀態4,每個狀態中新增上面的圖片做背景

axure 動態面板實現圖片輪播效果(淘寶)

我們在頁面處新增頁面載入事件,使頁面載入完成後,就開始不斷的按順序切換這個動態面板的狀態,此時就可以看到圖片如淘寶示例那樣不斷切換;接下來我們做一點有意思的事

axure 動態面板實現圖片輪播效果(淘寶)

新增四個矩形,設定選中組,選中後背景色變為橙色;透明度設定為50%

axure 動態面板實現圖片輪播效果(淘寶)

axure 動態面板實現圖片輪播效果(淘寶)

axure 動態面板實現圖片輪播效果(淘寶)

對所有矩形新增事件,當滑鼠移入時,該矩形變為選中狀態,圖片輪播的動態面板狀態切換為改矩形的狀態;當滑鼠移出是,該矩形變為未選中狀態,圖片繼續按順序切換這個圖片輪播動態面板的狀態

axure 動態面板實現圖片輪播效果(淘寶)

執行後,就有了類似淘寶的圖片輪播的效果,而且,滑鼠移入後右下角的矩形後,圖片可變為矩形對應的圖片,移出滑鼠後,圖片繼續輪播

axure 動態面板實現圖片輪播效果(淘寶)

注意事項

輪播效果做起來只是這樣,但是要想好看選圖也十分重要,當然,這是ui的工作了

相關問題答案