手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

Axure原型工具如何制作走马灯图片轮播效果

时间:2025-01-04 19:58:23

1、首先新建一个工作页面,在工作区域拖入一个动态面板,并命名为图片轮播区域。

Axure原型工具如何制作走马灯图片轮播效果

2、打开动态面板,在里面拖拽一个图片,这个自己看情况,我只打了几个字,代表这是图片1的位置。

Axure原型工具如何制作走马灯图片轮播效果

3、同样的方式,我们在动态面板中复制几个面板状态,对每个面板状态里的内容进行修改,图片2、图片3和图片4。

Axure原型工具如何制作走马灯图片轮播效果

4、返回到页面,在工作区域拖拽一个椭圆形,并将其命名为1。

Axure原型工具如何制作走马灯图片轮播效果

5、同样,我们椭圆复制出4个,分别命名为1,2,3,4个,并对这四个椭圆进行设置选项组名称,就是将这4个椭圆放到一个组内。

Axure原型工具如何制作走马灯图片轮播效果
Axure原型工具如何制作走马灯图片轮播效果

6、开始对4个椭圆设置选中状态,对期填充颜色进行设置。

Axure原型工具如何制作走马灯图片轮播效果

7、4个椭圆的选中状态设置完成后,开始对其属性事件进行设置,主要是对鼠标单击时的事件进行设置,如图所示。

Axure原型工具如何制作走马灯图片轮播效果

8、同样的方式,我们将第一个椭圆的事件复制一下到其他三个上面,并对其进行调整,如图所示。

Axure原型工具如何制作走马灯图片轮播效果

9、4个椭圆的事件做好了,开始对图片轮播区域的动态面板进行设置,首先要对其状态改变时的事件进行设置,如下图所示。

Axure原型工具如何制作走马灯图片轮播效果

10、然后我们在对动态面板的向左拖动结束时和向右拖动结束时的事件进行设置,如下图所示。

Axure原型工具如何制作走马灯图片轮播效果

11、所有工作完成后,f5预览一下效果,可以点击4个椭圆按钮来改变图片的轮播效果,同时图片也会自动轮放。

Axure原型工具如何制作走马灯图片轮播效果
© 手抄报圈