首页 技术 正文
技术 2022年11月11日
0 收藏 918 点赞 4,414 浏览 1609 个字

1、添加一个动态面板,添加上一张、下一张及当前banner对应的序号圆圈,如图所示:

Axure实现banner功能

当添加好元素后,实现自动轮播;点击【轮播图面板】页面;选中动态面板;右边添加事件编辑栏——属性——载入时——添加动作,如下图,选择 【设置面板状态】——勾选【轮播图面板】动态面板——选择状态【Next】——勾选【向后循环】——循环时间及进入动画可以自行设置,然后确定提交即可;预览,基本的轮播循环就实现了;

Axure实现banner功能

2、实现序号圆圈功能

  2、1 选择banner1的圆圈1(可自行填充颜色) —— 添加事件【等待】——设置等待时间为【1000】毫秒

    Axure实现banner功能

  2、2 选择banner1的圆圈2——添加事件【设置面板状态】——勾选【轮播测试图】动态面板——选择状态为对应的【banner2】——进入动画【向左滑动】时间为【3000】毫秒,退出动画【向左滑动】时间为【3000】毫秒,然后确定即可;

  Axure实现banner功能

   继续 添加事件【等待】——设置等待时间为【1000】毫秒;

  Axure实现banner功能

   继续 添加事件 【设置面板状态】——勾选【轮播图面板】动态面板——选择状态为【Next】————勾选【向后循环】——循环时间及进入动画可以自行设置,然后确定提交即可;

  Axure实现banner功能

  2、3 选中banner1圆圈3——添加事件【设置面板状态】——勾选【轮播测试图】动态面板——选择状态为对应的【banner3】——进入动画【向左滑动】时间为【3000】毫秒,退出动画【向左滑动】时间为【3000】毫秒,然后确定即可;

  Axure实现banner功能

  继续 添加事件【等待】——设置等待时间为【1000】毫秒;

  Axure实现banner功能

  继续 添加事件 【设置面板状态】——勾选【轮播测试图】动态面板——选择状态为【Next】————勾选【向后循环】——循环时间及进入动画可以自行设置,然后确定提交即可;

  Axure实现banner功能

  2、4、动态面板【banner2】、【banner3】里面的按钮效果时间设置和动态面板【banner1】一样;但是,对应的在2、3按钮的“配置动作”设置中,选择状态分别为对应的【banner2】、【banner3】

3、上一张和下一张控制

  3、1 点击向左按钮时,展示前一张图片。如果当前图片为第一张轮播图,则点击向左,出现第三张轮播图。

    选中【向左】元件,添加【鼠标单击时】,添加条件,如下:

    Axure实现banner功能

    【设置面板状态】,选择状态【banner3】,设置动画状态,如下图:

    Axure实现banner功能

    循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

    Axure实现banner功能

  3、2 如果当前轮播图不是第一张图片,则显示前一张图片。

    选择【向左】元件,【鼠标单击事件】添加用例,添加条件,面板状态不等于轮播图1时,如下图:

    Axure实现banner功能

    【设置面板状态】,勾选【轮播图面板】,选择【Previous】状态,设置动画。

    Axure实现banner功能

    循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

    Axure实现banner功能

  

  3、3 点击向右按钮,出现下一张图片。如果当前图片为第三张轮播图,点击下一张,出现第一张图片。

    选中【向右】元件,添加【鼠标单击时】,添加条件,如下:

    Axure实现banner功能

    【设置面板状态】,选择状态【banner1】,设置动画状态,如下图:

    Axure实现banner功能

    循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

    Axure实现banner功能

  3、4 如果当前图片不是第三张轮播图,点击向右按钮,出现下一张图片。

    选择【向右】元件,【鼠标单击事件】添加用例,添加条件,面板状态不等于轮播图3时,如下图:

    Axure实现banner功能

    【设置面板状态】,勾选【轮播图面板】,选择【NEXT】状态,设置动画,如下图:

    Axure实现banner功能

    循环设置:再次点击【设置面板状态】,选择状态【NEXT】,设置循环,点击确定。如下图:

    Axure实现banner功能

到此,完整的banner图设置就ok了

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,082
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,556
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,406
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,179
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,815
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,898