欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

[新手教程]Axure RP 8实现图片自动轮播

程序员文章站 2022-07-06 07:59:25
...

最近在做一个新项目的原型,需要实现轮播图需求,在网上查找了很多教程,博主似乎都默认了有些步骤读者可以独自完成,没有找到可以提供给对Axure RP使用不熟悉的小白的新手教程。于是在此记录下我的学习过程和操作方法。

1.建立面板,命名为Banner,在动态面板上右键选择“管理面板状态”:

[新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 
 

2.添加状态:
[新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 

 

3.选中每个状态,进入每个状态的编辑页面:
[新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 

4.State1面板中拖入图片控件并选择本地图片:
[新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 

至此,每个状态的页面编辑完成(至于每个图片底部的小圆点,与轮播图制作相同,在另一个动态面板中添加与还有一个比较偷懒的方法就是在状态编辑画布中加入与图片数量相同的小圆点控件并置于顶层,在State1中设置第一个小圆点变色,State2中设置第二个小圆点变色…

下面开始为动态面板添加交互。

5.“检视:动态面板”下“属性”中交互板块点击“更多事件>>>”,

[新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 

 

6.选择“鼠标移入时”,设置“目的地”的状态为“停止循环”。
[新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 

 

7.继续添加事件:鼠标移出时,页面继续轮播循环,定义循环的时间为2000ms2s)。
[新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 

 

8.为页面添加交互(同鼠标移出时的交互一样):续添加事件页面载入时。
[新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 

 

至此,一个简单的轮播图效果就做好了。当然,要具体应用还需要添加图片底部的小圆点、左右图片切换箭头、图片载入效果(淡入淡出)等等。

  • [新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 
  • 大小: 68.4 KB
  • [新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 
  • 大小: 9.3 KB
  • [新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 
  • 大小: 8.8 KB
  • [新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 
  • 大小: 118.3 KB
  • [新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 
  • 大小: 12.7 KB
  • [新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 
  • 大小: 48.6 KB
  • [新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 
  • 大小: 54.3 KB
  • [新手教程]Axure RP 8实现图片自动轮播
            
    
    博客分类: 前端 前端原型Axure 
  • 大小: 51.9 KB