使用axure动态面板制作轮播图效果-创新互联

轮播图是网站、移动app首页中经常用到的视觉交互形式,本文中我们使用axure制作一个动态轮播图的案例。

创新互联长期为1000多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为平阴企业提供专业的网站建设、成都网站设计平阴网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

达到的效果描述如下:

使用axure动态面板制作轮播图效果

  1.页面加载时自动向后轮播;

  2.点击[1]处向前切换图片,切换后再次自动向后轮播;

  3.点击[2]处向后切换图片,切换后继续自动向后轮播。

步骤:

1. 在设计区域中拖入一个图片元件,调整大小,双击导入图片;

2. 右键图片->转换为动态面板,并命名为p_w_picpaths,如下图:

使用axure动态面板制作轮播图效果

3. 双击p_w_picpaths,在面板状态管理器中,复制state1三次,最终达到4个状态,如下图:

使用axure动态面板制作轮播图效果

4.在图层面板中双击进入四个状态编辑区域,修改剩余三张图片样式,如下图;

使用axure动态面板制作轮播图效果

5.在自带的Icons元件库中,拖入左右两个箭头到p_w_picpaths上方,调整大小;

6.在页面中,双击“页面载入时”,在用例编辑器中,设置面板状态p_w_picpaths为next,勾选向后循环、循环间隔、首个状态延时复选框,间隔的时间可以自己设置,一般3000毫秒比较好,我为了省事直接默认了~进入推出动画都选择向左滑动,如下图

使用axure动态面板制作轮播图效果

7.选中左箭头,双击“鼠标单击时”,在用例编辑器中,设置面板状态p_w_picpaths为previous,勾选向前循环(无需勾选循环间隔,因为不需要自动向前轮播),动画都选择向右滑动;在点击左箭头想前切换图片后,如果不继续点击,则还应该继续向后轮播,则继续添加动作,切换p_w_picpaths状态(和页面加载时相同),如下图:

使用axure动态面板制作轮播图效果

8.右箭头同理,鼠标单击时向后切换,之后继续添加自动向后轮播的动作即可。

以上就是一个基本的轮播图效果,但是在实际的网站或app中,轮播图的下方或角落里都会有一个当前状态的显示,如下图:

使用axure动态面板制作轮播图效果

这个状态指示器如何制作呢?大家可以思考一下。

给点提示,状态指示器其实也是一个动态面板的四个不同状态,大家可以尝试一下让图片和指示器两个动态面板同时切换状态,大体思路就是这样的,但是这里边可能会出现一些问题,如果大家有兴趣可以学习我的51cto学院中的axure实战课程,地址如下:http://edu.51cto.com/course/course_id-8008.html

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站题目:使用axure动态面板制作轮播图效果-创新互联
网页地址:http://myzitong.com/article/cedpgj.html