axure滑动切换图片(axure点击切换图片)

Axure 左右滑动页面切换

1、需要设置动态面板组，将不同的页面添加到动态面板的不同状态中去

2、然后设置 ?向左拖动结束时/向右拖动结束时 ?和不同的动态面板状态相连接

3、实现左右滑动页面切换

Axure之实现图片自动循环切换效果

【男女的思维的确是不同，最近和老婆商量锻炼的事，因为我们俩都胖了，要开始锻炼。我第一个想到的是，安排在什么时间比较好；而她率先下单买了套运动服。昨天已经送到~~~】

axure如何实现图片自动循环切换效果???

1）添加动作中，选择【设置面板状态】，在配置动作中，依次按照下面图片中的箭头，选择状态：Next，勾选【向后循环】，【循环间隔2000毫秒】，单个状态耗时2000毫秒后切换等等，最后点击确定。

解释下：添加这些case的目的是，图片切换时，下面的小圆心的样式也可以跟着切换。只有这个目的。

来自 格雷戈·莫顿森《三杯茶》

【一只猴子，肚子被树枝划伤，流了很多血。它见到一个猴子就扒开伤口说，你看我的伤口好痛。每个看见它伤口的猴子都安慰它，告诉它不同的治疗方法。它就继续给朋友们看伤口听取意见，后来它感染死掉了。一个老猴子说，它是自己把自己弄死的。痛，说一次就痛一次，不如自己默默愈合。启发：你若不坚强，懦弱给谁看~~~】

【1】 AxureRP8实战手册-案例12（动态面板：自动图片切换）

如果有带给你一丝丝小快乐，就让快乐继续传递下去，欢迎点赞、顶、欢迎留下宝贵的意见、多谢支持！

Axure如何实现点击按钮，图片切换（如图）

1、在Axure工作界面中，建立一个按钮开关和一个图片元件。

2、双击图片元件将图片拖入到这里来，然后对图片可以调整下位置、大小设置。

3、选择左侧的按钮开关，打开右侧属性标签中的鼠标点击时状态。

4、双击打开属性设置区，在这里的元件下，找到显示/隐藏设置。

5、作用的对象为刚才设置的图片元件，然后选择下方的显示隐藏为切换状态，还可以设置出现的动画、时间。

6、确定后，回到刚才的设置界面，会看到在切换按钮上出现一个1的标志，表示已经对他添加了效果。最后就可以在发布中看预览效果了。

【原型设计】手把手教你巧用Axure制作图片轮播

通常我们在很多互联网产品的主界面都会看到各类各样的轮播图，那么这些轮播图的交互效果，有没有办法利用原型工具制作出来，现在就介绍下如何利用老牌原型工具Axure制作出多张图片轮播的效果，主要思路是通过页面载入事件、鼠标单击事件利用动态面板之间联动，从而实现多张图片的自动轮播效果。

拖动一个动态面板到面板区，为动态面板添加3个状态，每个状态导入相同尺寸的图片；注意每个状态里图片的坐标要设置为（0，0）坐标不一致会导致轮播的时候图片显示位置出现偏移，甚至看不到图片。动态面板命名为图片，3个状态分别命名为图片1、图片2和图片3。第一个动态面板准备好了。

下面开始准备第二个动态面板，拖到另一个动态到面板区，设置3个状态，每个状态里面放置3个圆，且等距离排放。状态1将第一个圆填充颜色；状态2将第二个圆填充颜色；状态3将第三个圆填充颜色。每一个状态都有一个实心圆，实心圆用作轮播图片的指示器。动态面板命名为指示器，3个状态分别命名为指示器1，指示器2和指示器3。

指示器添加单击事件 ：为指示器动态面板状态1的第1个圆添加单击事件，动作设置为图片动态面板的状态为图片1状态，动画效果为向右滑动，时间为500毫秒。为第三个圆添加单击事件，动作设置为图片动态面板的状态为图片3，动画效果为向左滑动，时间为500毫秒。

下面为中间的圆设置单击事件，这时候需要对动态面板的状态进行判断了，根据状态的不同，决定了图片的滑动方向。选中中间的圆，点击单击事件，增加条件判断，在条件窗口中设置如果指示器动态面板为状态1（指示器1），则动作设置为图片动态面板为状态2（图片2），动画效果为向左滑动，时间为500毫秒；为单击事件在添加另一个实例，条件判断中，设置如果指示器动态面板为状态3（指示器3），则动作设置为图片动态面板为状态2（图片2），动画效果为向右滑动，时间为500毫秒。最后注意将case2切换为if，因为两个case为并列关系，所以要切换为if。（通常默认else if，与case1的关系是如果...否则...，否决的是case1事件）

将状态1的交互事件复制到状态2和状态3

页面载入事件： 为页面添加交互事件的时候注意不能选中任何部件，点击页面空白处，我们会看到Axure右上方由部件的交互转变为了页面的交互。点击页面载入时事件，添加动作，设置图片动态面板的状态为next，设置循环时间为500毫秒，动画为向左滑动，动画时间为500毫秒；在添加另一个动作，设置指示器动态面板的状态为next，设置循环时间为500毫秒，动画为向左滑动，动画时间为500毫秒。

友情提示：这里的两个动态面板状态的切换顺序和时间、动画效果以及动画的时间均要保持一致，否则动画轮播的时候会出现不同步的现象。

到此为止，多张图片轮播的效果已经实现了，点击预览欣赏下自动轮播效果吧，还可以通过鼠标点击指示器将自动轮播切换为手动轮播，手自切换就是如此随心。朋友们打开你们的Axure尝试独立制作，相信聪明的你们很快就能学会。