产品中心news

(上午8:30-夜晚21:00)

Axure RP8 教程:淘宝轮播图自动滚动效果

(发布时间:2020-05-29 06:31编辑:admin 浏览次数:

  作为产品经理必备神器之一,axure相信每个人都用过。这篇文章带大家了解下淘宝轮播图效果的制作与效果的实现。

  产品人员思路最为重要,所以动手之前我们先理理思路,我们先罗列出淘宝轮播图需要实现的效果:

  好了,基本效果已经罗列出来,下一步就是开始动手制作。我们可以一步一步来,先实现一步,再实现下一步,避免思绪混乱。

  动态面板是axure里面一个非常重要的原件,很多效果都是通过动态面板实现的,今天我们的轮播图也要用到动态面板。

  现在我们就可以axure右下角看到刚才的图片已经转化成为动态面板了,我们点击复制状态,复制三次,并且把淘宝轮播图剩下几张复制粘贴进去。

  现在我们可以看到图片已经在里面了,基础的结构已经有了,接下来就是实现效果了。

  实现自动轮播效果。我们点击动态面板,设置载入时自动切换,间隔4000ms,切换动画左滑,动画时长500ms。

  先做个好样式。拖出几个圆圈设置大小11*11,背景白色,间隔10px,设置选项组名称“轮播焦点”,设置选中时颜色FF5000。命名分别设置为“焦点-1”、“焦点-2”、“焦点-3”、“焦点-4”。

  实现到图片选中对应的焦点。点击动态面板,设置状态改变事件,记得设置条件判断,每次动态面板为第一页时选中“焦点-1”,其余几个相同。

  实现点击焦点切换轮播图。我们点击“焦点-1”设置点击事件,点击切换到动态面板第一页。效果逐渐,时间500ms。

  首先实现基础样式,先做两个样式在轮播图左右两边,不透明度30%,设置交互事件,选中时不透明50%。

  鼠标移入移出显示隐藏左右按钮效果。将两个元件与动态面板和下方的焦点组合,设置鼠标移入组合事件,显示两个元件,鼠标移出组合时隐藏两个元件。

  点击切换轮播图,设置左键点击事件,轮播图切换到上一张,动画效果向右滑动,然后设置继续滚动(与载入事件同)。

  同样的,右键点击事件也是一样,轮播图切换到下一张,动画效果左滑,然后设置继续滚动(与载入事件同)。

  这里推荐你加Axure实战班的助教小可爱@CC-起点学院(微信:qidiancc520),回复关键词:大礼包

  领取适合产品新人的原型设计大礼包哦,cc还会不定期分享Axure免费视频课程呢!

  缺少描述载入时第一个焦点设为选中状态,还缺少每一个焦点选中时要设置其他焦点取消选中

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

24小时为您服务