某某机械有限公司
呼和浩特乾安开发公司 | Tel : 49060978 | E-mail:308993508@QQ.COM
关于我们 产品中心 新闻中心 客户案例 在线留言 联系我们 新闻 行业快讯
产品大类1 产品大类2 产品大类3
图片自动轮播+点击切换Axure教程:广告
发布者:admin浏览次数:

广告图轮播在日常的原型设计中是最常见的了,今天和大家分享如何制作自动轮播+手工点击切换,底部有已制作好的原型文件下载,废话不多说,咋们现在就动手实现。

1、选中图片右键转换为动态面板,同时在动态面板中添加第二张和第三张广告图。

2、点击页面空白处,设置页面载入时事件,选择设置动态面板效果,选择banner图片动态面板,把状态设置为Next, 勾选向后循环和循环间隔,同时设置好进入动画和退出动画向左滑动。

3、重复以上两步操作把焦点图完成,其中注意两点,一是进入动画和退出动画设置为逐渐,二是每一帧设置好对应的焦点样式。

到这里可以预览一下效果,会发现简单两步,我们就实现了广告图轮播了,图片自动轮播+点击切嘻嘻。

(1)设置切换面板状态,需同时设置好焦点样式和banner图片对应的面板状态。

例如:选择第一帧的元素,则设置焦点样式和banner图片的面板状态切换到第一帧和第一张,以此类推,把第二帧和第三帧设置好。

(2)设置单击后自动轮播,需同时设置好焦点样式和banner图片对应的面板状态自动轮。

方法和第一步基本雷同,例如选择第一帧的元素,则设置焦点样式和banner图片的面板状态设置为Next,向后循环,设置项如下图。

用此方法重复把每一帧的焦点样式制作好,我们的banner图自动轮播+点击切换轮播,就完成了,是不是很简单。

我是小白 请问page1里面做了banner图片和焦点样式 page1里面不会显示两个图片吗?不明白这个焦点样式怎么来的?

axure8, 找了好久还是没搞明白焦点图是什么意思,第一帧、第二帧、第三帧也没有找到!

第一帧是动态面板里面面板的命名,是可以自己修改的,动态面板默认是“state1”。。。

焦点图是另一个动态面板的名称,第一帧,第二帧,第三帧是3个不同的状态,这是自己画的。

我是小白 请问page1里面做了banner图片和焦点样式 page1里面不会显示两个图片吗?不明白这个焦点样式怎么出来的!

焦点图就是分页符,banner轮播预览下面的三个小横条 我真的不太想吐槽,我还以为作者有什么新的方法制作轮播图,原来还是两个动态面板实现?

人人都是产品经理(是以产品经理、运营为核心的学习、交流、换Axure教程:广告分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。