如何使用Axure:[1]制作可切换Banner效果

 时间:2026-02-14 20:59:18

1、拖一个矩形到面板

如何使用Axure:[1]制作可切换Banner效果

2、将这个矩形的形状调整为三角形,作为切换箭头。再添加一个切换箭头,然后调整两者的距离,为Banner留出位置。

如何使用Axure:[1]制作可切换Banner效果

如何使用Axure:[1]制作可切换Banner效果

如何使用Axure:[1]制作可切换Banner效果

3、添加一个矩形,作为背景

如何使用Axure:[1]制作可切换Banner效果

4、添加一个矩形。

如何使用Axure:[1]制作可切换Banner效果

5、将这个矩形转换为动态面板,并命名动态面板。之后我们会使用这个动态面板作为我们切换Banner的主体。

如何使用Axure:[1]制作可切换Banner效果

1、双击Banner,进入到动态面板的状态管理界面。

如何使用Axure:[1]制作可切换Banner效果

2、调整Banner的状态列表,在列表中的状态,将为我们将要切换的一个个具体的Banner图

如何使用Axure:[1]制作可切换Banner效果

3、到Banner的各个状态中,添加需要呈现的图片。

这里要注意状态中图片的尺寸要与Banner动态面板的尺寸一致。

如何使用Axure:[1]制作可切换Banner效果

1、为切换箭头添加单击事件,以保证当我们单击切换箭头的时候,可以切换Banner图

如何使用Axure:[1]制作可切换Banner效果

2、在单击事件的用例编辑面板中,找到「动态面板 - 设置面板状态」。

如何使用Axure:[1]制作可切换Banner效果

3、配置用例事件的具体属性。包括选择的状态,这里我们使用「Next」。当切换到最后一张Banner的时候,是否循环到第一页,这里我们选择「是」。切换的方式,这里需要注意的是,我们需要保证进入动画与退出动画的Slide方向是一致的,这样才能够从左进入,再向左退出。

如何使用Axure:[1]制作可切换Banner效果

如何使用Axure:[1]制作可切换Banner效果

4、以同样的方式配置另一个切换按钮的用例事件。这里选择「Previous」「Slide Right」

如何使用Axure:[1]制作可切换Banner效果

  • PS怎么让图片呈现径向模糊的效果
  • AI 简易设计(一)--- 小木屋设计思路
  • photoshop怎么使用群组功能优化显示图层文件 ?
  • 如何制作动态图片视频
  • ps制作《战狼2》岩石海报艺术字
  • 热门搜索
    杭州的旅游景点 燕子沟旅游 10月份去哪旅游最好 趣途旅游网 邮船旅游 南岳衡山旅游网 成都旅游门户网 安康有哪些旅游景点 军都旅游度假村 公司旅游注意事项