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原型工具如何制作走马灯图片轮播效果
  • AE中用钢笔工具实现形状补间动画
  • C4D建模容差选中的运用
  • AE学习-如何给形状添加收缩和膨胀效果
  • C4D在哪可以取消锁定时间
  • C4D文字膨胀动画
  • 热门搜索
    趣味语文手抄报 数学的手抄报 有关健康的手抄报 三节手抄报 爱的教育手抄报 校园安全知识手抄报 56个民族手抄报 有关古诗的手抄报 黑白手抄报图片 法制手抄报版面设计图