1、新建Axure PR文件,取名“Axure制作首页轮播图片切换效果”
2、获取素材,进入36Kr官网主页,获取轮播图片素材。
3、拖拽动态面板控件Dynamic Panel,取名“轮播图片”,设置6个状态分别取名为1、2、3、4、5、6,动态面板大小设置为和图片大小一致747*231px。
4、双击动态面板1-6每个状态,分别将图片1-6添加到动态面板状态中。
5、回到Home主页,在动态面板“轮播图片”左右分别添加一个图片控件Image(从Widgets控件栏拖拽),分别取名left、right,位置、大小根据需要自由调整。
6、将left、right图片分别替换成选择的素材图片。两个图片位置和大小自行调整。
7、选中两个Image控件left、right,单机右键,选择Set Hidden,设置隐藏。
设置隐藏后的效果如下
8、为动态面板“轮播图片”设置自动定时轮播效果。选中动态面板“轮播图片”控件,在Page Interactions栏添加OnPageLoad事件,选择Dynamic Panels——Set Panel State——Set the state选择Next——勾选Wrap from last to first和Repeat every 2000 ms(设置每两秒钟轮换一张图片)——选择Animate In和Animate Out分别为slide left,表示从左滑入和从左滑入,设置滑入滑出时间默认为500ms。
9、添加动态面板“轮播图片”鼠标事件。鼠标移到图片上时,自动显示左右两个方向按钮。选中动态面板“轮播图片”,添加OnMouseEnter事件,选择Widgets控件栏,选择Show/Hide,为Left、Right图片控件设置显示效果。
10、添加动态面板“轮播图片”鼠标事件。鼠标移出图片时,自动隐藏左右两个方向按钮。选中动态面板“轮播图片”,添加OnMouseOut事件,选择Widgets控件栏,选择Show/Hide,为Left、Right图片控件设置隐藏效果。
11、为Image:Left、Right分别添加事件,点击Left图片显示上一张,点击Right图片显示下一张,选中Left和Right图片控件,设置Onclick事件,如下。
Left按钮为显示上一张,图片从左向右滑动,Select the state选择Previous,Animate In 和Animate Out选择slide right。
12、演示效果如下
13、如需演示素材和rp源文件,如下留言获取。
如需素材包及rp源文件,请留言联系作者获取。