Axure教程:制作一个完美的Banner轮播效果

Banner轮播是原型图中最常见的模块之一,无论是电商类的app还是小说类,视频类app都离不开它;

运营喵的世界首页就有一个banner轮播。

Axure教程:制作一个完美的Banner轮播效果

轮播的特点主要有自动切换到下一张图片,图片到达末尾之后从头开始循环。

此外,下方的图片导航也需要随着图片的切换而切换,告知用户当前图片的位置。

用户可以通过图片中的箭头左右切换图片,也可以使用下方的导航条来切换图片。

五种轮播效果:

  1. 【页面载入时】自动轮播图
  2. 可左右单机交互的轮播广告
  3. 带有状态指示器和左右的轮播
  4. 指示器&&自动轮播
  5. 淘宝首页的轮播

方法一:【页面载入时】自动轮播图

1、整体思路

观看整个轮播效果,是在打开页面的时候,在页面上并没有进行任何操作,就在进行自动轮播,由此可见,这个是【页面载入时】事件,而我们制作轮播效果最常用的原件就是“动态面板”。

预览地址:点击此处预览

2、制作方法详解

1、基础原件添加

从左侧的元件库里拖动“动态面板”到右侧的画布,然后在每个状态里添加一张图片。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

动态面板添加基础图片元件

2、页面载入时添加交互事件

从“整体思路”得知,是在页面‘载入时’添加交互事件,并设置‘动态面板’事件。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

‘页面载入时’交互事件

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

‘动态面板’交互事件

注意:循环间隔毫秒设置,1000毫秒 = 一秒;

通过这样的设置过后,然后在浏览器预览,就可以看到‘页面载入时’自动轮播效果。

方法二:可左右单机交互的轮播广告

1、整体思路

观看整个轮播效果,是在打开页面的时候,图片并没有自动轮播,而是点击“左”、“右”再进行轮播,而我们制作轮播效果最常用的原件就是“动态面板”,并添加左右交互事件。

预览地址:点击此处预览

2、制作方法详解

1、基础元件添加

在画布里添加“动态面板”元件,并在状态里添加图片,并为“动态面板”命名为【ad】。

并添加两个圆形,分别命名为【left_arrow】、【right_arrow

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

基础元件添加

2、添加“鼠标单击时”交互事件

分别为向左和向右的圆形添加“鼠标单击时”交互事件。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

左右箭头添加交互事件

3、详细设置“鼠标单击时”交互事件

为“左”、“右”箭头设置“动态面板”交互事件,向左箭头【left_arrow】设置“动态面板”事件为“Previous”,并勾选“向前循环”;向右箭头【right_arrow】设置“动态面板”事件为“Next”,并勾选“向后循环”;

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

注意:向左和向右箭头的交互事件,都不要勾选“循环间隔毫秒”。勾选过后,会在点击事件过后,进行间隔事件后,自动轮播。

通过这样的设置过后,然后在浏览器预览,就可以看到‘页面载入时’自动轮播效果。

方法三:带有状态指示器和左右的轮播

1、整体思路

整个轮播效果可以拆分为以下几块:

  • 页面打开时,页面并没有自动轮播,所有无【页面载入时事件】;
  • 点击“左”、“右”再进行图片轮播,而下方的指示器也跟随者变换;
  • 鼠标移速指示器时,后面的图片也跟随者变换;

预览地址:点击此处预览

2、制作方法详解

1、基础元件添加

从左侧的“元件库”里添加两个“动态面板”,分别命名为【ad_nav】和【ad】,在添加两个圆形,分别命名为【left_arrow】、【right_arrow】。

动态面板【ad】,添加三个状态,每个状态里都添加一张图片。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

动态面板【ad_nav】,添加上个状态,每个状态里添加三个圆,大小为【20*20】,圆角为10。三个状态制作过后的效果如下,并分别在第一个状态里的第一个圆添加一个背景色;第二个状态里的第二个圆添加背景色,第三个状态的第三个圆添加背景色;

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

2、添加“鼠标单击时”交互事件

分别为向左和向右的圆形添加“鼠标单击时”交互事件。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

左右箭头添加交互事件

3、详细设置“鼠标单击时”交互事件

为“左”、“右”箭头设置“动态面板”交互事件,向左箭头【left_arrow】的“鼠标单击时”交互事件设置“动态面板”【ad_nav】和【ad】事件为“Previous”,并勾选“向前循环”;

向右箭头【right_arrow】的“鼠标单击时”交互事件设置“动态面板”【ad_nav】和【ad】事件为“Next”,并勾选“向后循环”;

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

经过这样的设置,可以是实现,点击左右箭头,图片和下面的指示器都可以轮播了。

4、鼠标移入指示器显示对应图片

为“动态面板”【ad_nav】的三个状态里面的三个小圆,添加【鼠标移入时】交互事件;并设置“动态面板”交互事件;

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

第一个圆,对应的动态面板【ad_nav】状态一和【ad】状态一;第二个圆对应动态面板【ad_nav】状态二和【ad】状态二;第三个圆对应着动态面板【ad_nav】状态三和【ad】状态三;

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

动态面板【ad_nav】的三个状态里面三个小圆,都设置对应的交互事件,就可以啦,整个可点击轮播效果都实现啦。

方法四:指示器&&自动轮播

1、整体思路

首先,我们先来看一下要实现的案例效果。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

指示器&&自动轮播实现效果图

我的思路是这样的:

  • 让底部的圆点标签有唯一选中的效果;
  • 每一个圆点标签选中时都做三个动作,设置动态面板状态为对应的状态、等待一定时长以及选中下一个圆点标签;
  • 页面打开时,选中第一个圆点标签,这样就能开启幻灯片的轮流播放;

预览地址:点击此处预览

2、制作方法详解

1、先让圆点标签有唯一选中的效果

接下来,我们先准备好元件,并为元件命名。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

我们需要做三件事,来完成这个需求,这里我们先完成其中的两件。

  • 全选圆点标签,为它们设置一样的【选中】时的交互样式;这一步是为了圆点标签变为选中状态时能够改变颜色。
  • 继续在上一步的功能界面中,为全部圆点标签【设置选项组名称】为“Tag”;这一步是为了让一组圆点标签中,只有一个能够变为选中状态。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

2、我们给任意一个圆点标签添加交互,以第一个圆点标签“Tag1”为例。

在圆点标签被【选中时】,要将动态面板“SlidePanel”切换到对应的状态从而显示对应的广告图片。

这里大家注意,【设置面板状态】的动作设置中,我们要将目标元件“SlidePanel”的状态选择为【Value】,也就是值。

选择之后,在下方出现了新的设置“状态名称或序号”,也就是说我们可以通过动态面板状态的名称或序号,将动态面板切换到指定的状态。

这里我们要用的是序号。

动态面板状态的序号就是在概要面板中,各个状态由上至下排列的顺序号。

也就是当我们点击圆点标签“Tag1”的时候,要把动态面板切换到序号为“1”的状态;

点击圆点标签“Tag2”的时候,要把动态面板切换到序号为“2”的状态;以此类推。

那么,这个序号我们可以填写固定的数字。

不过,大家能够看到圆点标签名称的最后一位字符就是与序号相同的数字,如果我们取到这个数字,填在输入框中,也可以完成这个设置。

这个数字我们可以通过公式“[[This.name.slice(-1)]]”来获取。

公式中“This.name”可以获取到当前被选中的圆点标签的名称。

而“.slice(-1)”是字符串截取函数,它可以输入两个参数(截取的起始位置和终止位置),也可以输入一个参数(截取的起始位置);当只输入一个参数时,能够对字符串对象从起始位置截取到末尾;并且。这个函数的参数可以为负数,输入负数的话,是从末尾进行倒数的位置;这里的“-1”,表示倒数第1位字符。

所以,公式“[[This.name.slice(-1)]]”的意思是获取“当前元件的名称的最后一位”。

填入公式之后,我们再设置一下状态切换的动画,就完成了这个动作。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

3、继续上一步,我们再添加一个【等待】的动作,以便等待“2000”毫秒后,选中下一个标签。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

4、继续上一步,添加【选中】下一个圆点标签的动作

因为是在给第1个圆点标签“Tag1”添加交互,这里我们选中下一个圆点标签就是“Tag2”。

这一步,就是圆点标签唯一选中效果要做的第3件事,把圆点标签变为选中状态。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

5、完成了上面的几步之后,我们把第1个圆点标签【选中时】的交互复制,粘贴给其它三个圆点标签。

粘贴之后,从第2个圆点标签开始,逐一修改最后一个选中圆点标签的动作,为选中当前圆点标签的下一个标签。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

6、为第1个圆点标签的【载入时】添加交互,【选中】当前这个圆点标签。

这样,在页面打开后,第1个圆点标签会被选中,从而触发第1个圆点标签的【选中时】交互,通过运行交互中的动作,在完成动态面板的状态切换以及等待2秒钟的动作之后,又通过最后一个【选中】下一个圆点标签的动作触发了下一个圆点标签【选中时】的交互。

以此类推,形成了循环的效果。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

以上就是整个案例的实现过程。

方法五:淘宝首页的轮播

1、整体思路

首先,我们先来看一下要实现的案例效果。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

指示器&&自动轮播实现效果图

我的思路是这样的:

  • 图片向左滑动轮播,间隔3s,滑动动画500ms;
  • 下方焦点,点击切换到相应的图片;
  • 左右切换按钮,鼠标放入轮播图显示,悬置在按钮上颜色加深。

预览地址:点击此处预览

2、制作方法详解

1、先准备好元件

接下来,我们先准备好元件,并为元件命名。

先添加三个动态面板,分别为【l-r】、【ad_indicator】和【ad】。

动态面板【l-r】,状态一里面放置左右两个箭头图片,分别为leftright

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

先隐藏动态面板【l-r】,然后再继续下一步操作。

2、实现自动轮播效果

可以设置页面级事件,也可以设置控件级事件,在这里我们设置控件级事件。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

我们点击动态面板【ad】设置【载入时】事件,【ad_indicator】和【ad】状态为【Next】向后循环,间隔3000ms,切换动画左滑,动画时长500ms

3、为每个指示器添加事件

现在我们要设置指示器事件,我们要设置鼠标点击每个指示器,并轮播到对应图片,等待几秒钟,在滚动到下一个状态。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

动态面板【ad_indicator】的5个状态样式

先为动态面板【ad_indicator】状态一五个状态里面的圆设置,进行【鼠标单击时】事件设置;设置【ad_indicator】和【ad】状态,第一个圆对应着状态一,第二个圆对应着状态二,第三个圆对应着状态三,第四个圆对应着状态四,第五个圆对应着状态五;

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

动态面板【ad_indicator】的状态设置

为动态面板【ad_indicator】的其他几个状态,都按照上面这样操作。

以上设置是点击指示器,会显示对应的状态,打过几秒过后,又没有动作了,所以还需要设置后面的交互事件。

我们在【ad_indicator】的状态后面添加等待【3000毫秒】和【ad_indicator】和【ad】轮播事件。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

点击指示器过后的轮播事件

4、显示向左向右元件

为动态面板【ad】,添加鼠标移入时和移出时事件,设置动态面板【l-r】可见性,并停止和恢复轮播。

设置鼠标移入动态面板【ad】,显示动态面板【l-r】,并停止动态面板【ad_indicator】和动态面板【ad】轮播。

设置鼠标移出动态面板【ad】,隐藏动态面板【l-r】,并恢复动态面板【ad_indicator】和动态面板【ad】自动轮播,轮播时间为3000毫秒。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

鼠标移入和移出动态面板【l-r】的交互事件

5、动态面板【l-r】的左右点击事件

动态面板【l-r】状态一的向左箭头,添加【鼠标单击时】交互事件,设置动态面板【ad_indicator】和动态面板【ad】的状态为为“【Previous】”,并勾选“向前循环”;

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

以上操作点击过后,都只能向左,但点击过后就不会再有操作了,我们还需要为动态面板【l-r】设置点击过后的自动轮播事件,在轮播钱,需要等待3000毫秒,再自动向右轮播。

Axure教程:制作一个完美的Banner轮播效果--运营喵的世界

向左箭头已经设置好了,现在设置向右,向左和向右一样设置,设置动态面板【ad_indicator】和动态面板【ad】的状态为为“【Next】”,并勾选“向后循环”。

到此为止,整个轮播效果都已经完成了。

源文件下载:

提取码:rtmw

参考文章:
  1. Axure教程:怎样设计轮播图?
  2. Axure教程|完美的Banner轮播效果
  3. Axure RP 8中图片轮播新的实现方式
  4. 用axure实现图片轮播最简单的办法
  5. Axure RP 制作图片轮播
  6. Axure教程:轮播图制作步骤详解
  7. Axure教程:全屏下拉菜单导航交互效果的原型设计 | 全屏导航
  赞 2