7.0窗口改变大小 axure rp_Axure实例1banner图片左右滑动轮播效果

当前案例，可以用于中高仿真原型的图片轮播效果，以及多文章左右查看的同区域左右滑动显示效果。

移动互联网时代，无论是手机屏还是PAD这种横屏展示，为了在同一个页面展示更多的内容，尤其是类似于图片类或者多文章类的内容，都可以通过在区域内左右滑动显示更多，既好看又可以减少跳转。

之前在百度经验分享过类似的案例，今天是升级版的，适用于任何内容。

为了方便浏览，可能图片不会放整个axure的完整截图，仅是截取主要部分的图片。

╭◎◔◑◕◉◌-华丽的分割线-◌◕◑◔◌◎╮ 

⚑工具：axure 8.0

⚑步骤详解：

⇲第一阶段：准备工作

1. 新建一个axure文档；并在其中添加一个600*300的底图背景；在两侧预留20px的位置，各放置两个15*15的图标，做激发操作的按钮。

   

2. 建立四个动态面板，大小为180*250px，分别命名no1/2/3/4,并将其间距调整为10px，1/2/3为显示，4为隐藏(属性)，no4放置在底图最右边的边缘位置；通过辅助线明确位置的准确性(可如图中一样，通过工作窗口的边缘拖出辅助线做帮助)。

   

3. 选择四个图或者四篇文章内容，大小均为和动态面板的尺寸一致。

4. 以动态面板no1为例，双击no1，弹出动态面板编辑窗口，如下图，在“面板状态”对应的名称上右键，编辑名称，案例中改为“图1”，并点击工具状态栏上的编辑状态，进入面板no1的编辑状态。

   

5. 在面板no1-图1的编辑状态窗口，插入图片或者文章内容。将图片拖入蓝色虚框内或者在其内编辑文章。(蓝色虚线框内为动态面板图1状态的内容展示位置，超出内容不显示)

       ↙

6. 

7. 其他动态面板no234,同步骤5的处理方法。最终如图所示。

   

⇲第二阶段：效果实现，实现当按动左右两边的小按钮时，实现每个面板的内容轮换显示。

显示234，隐藏1的效果操作：

1. 选中右侧按钮，“鼠标点击时”-添加用例；在弹出窗口点击“元件”下的“移动”，在最右侧“配置动作”进行1234的配置，具体内容如下：

1. 动态面板no1的处理：选中1，(值的算法：no1距离底图的左侧边缘为20，+no1本身的宽度，由于是往左移动，所以是负数)；为了防止no1的内容一直移动，为每个面板设置边界值，no1设置边界值，左侧>120;保证点击切换按钮的时候，不冲出底图的显示区域

2. no2:的处理：选中2，下方“移动”选“经过”X设置值为-190(间距10+180,也就是说no2移动到no1的位置)；左侧>120;

3. no3的处理：选中3，下方“移动”选“经过”X设置值为-190(间距10+180,也就是说no3移动到no2的位置)；左侧>310;

4. no4的处理：选中4，下方“移动”选“经过”X设置值为-200(no4本身的宽度+图标占据的位置，也就是说no4移动到no3显示)；左侧>500;

5. 隐藏显示的设置：同用例(case1)下，元件-显示/隐藏，no1设置为隐藏，no4设置为显示；

隐藏显示的设置：同用例(case1)下，元件-显示/隐藏，no1设置为隐藏，no4设置为显示；

右侧按钮的设置方式同上，就是参数不同，具体可查看完成后如图参数：

右侧按钮

左侧按钮

就是这样的，你学会了吗？

╭◎◔◑◕◉◌-华丽的分割线-◌◕◑◔◌◎╮ 

⚑还有一种用例的设置方法，就是对于no1不设置移动属性，仅是设置其显示隐藏的属性即可。