使用Axure 8进行轮播图效果的设计

时间:2024-03-13 07:43:35

1. 新建页面index,拖取动态面板到首页使用Axure 8进行轮播图效果的设计
2. 双击动态面板,添加三个状态,分别是State1、State2、State3。
使用Axure 8进行轮播图效果的设计
3. 先打开State1,添加图片,选择自己喜欢的图片导入,添加左右箭头(命名为左、右)。
使用Axure 8进行轮播图效果的设计
4. 打开state1,ctrlA全选,ctrlC复制,再打开state2和state3,ctrlV粘贴,将state2和state3的图片换掉即可。
使用Axure 8进行轮播图效果的设计
5. 选中主页index,设置自动轮播脚本,先点击页面载入时,选择设置面板状态,勾中多选框,按照5设置,再点击最左侧的置于顶层,都设置完毕后,点击确定。使用Axure 8进行轮播图效果的设计
6. 添加左右箭头单击事件脚本。
选中state1下面的左箭头,设置鼠标单击时效果,选择设置面板状态,勾中set多选框,选择状态为state3(这里是点击图1的左箭头会跳转到图3的意思)
选中state1下面的右箭头,设置鼠标单击时效果,选择设置面板状态,勾中set多选框,选择状态为state2(这里是点击图1的右箭头会跳转到图2的意思)
以此类推,设置state2和state3里面的左右箭头。。。。。。。。。。
使用Axure 8进行轮播图效果的设计
7.最终的效果,图片可以自动轮播,且点击每一页的左右箭头,都可以实现跳转。
使用Axure 8进行轮播图效果的设计