网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 网站优化 » 正文

Axure8 原型设计:动态面板实现图片轮播

2019-7-13 22:55:26 | 作者:老铁SEO | 0个评论 | 人浏览

  我们在浏览网站时经常会看到图片轮播效果,那么,这个效果如何用Axure实现呢?

  很多网站都会用到图片轮播,在原型设计中相信很多人都会用到,本和大家分享一下用动态面板实现图片轮播的效果。原型预览效果如下:

  1个动态面板:动态面板需新增4个面板,每个面板设置对应的轮播内容(本文用不同颜色的矩形代替);

  PS:第一个椭圆形页码需要设置为选中状态,当页面加载时,默认播放的是一张图片!

  动态面板在页面载入时就开始自动轮播,鼠标点击页面选择“页面载入时”事件:

  图片轮播时需显示当前轮播到第几个面板,该事件需在动态面板“状态改变时”事件中配置:

  鼠标双击“状态改变时”用例,增加多个事件用例,设置面板切换时,椭圆形页面选中状态:

  鼠标点击时需要将动态面板切换到对应的页面,第一个椭圆形切换到第一个面板,第二个椭圆形切换到第二个页码,以此类推:

  点击时,除了需要切换动态面板,还需设置当前椭圆形“选中”状态,设置其他椭圆形“取消选中”状态:

  当鼠标移入轮播区域时,图片要停止轮播,显示上一页、下一页按钮;当鼠标移除轮播区域时,图片恢复轮播并隐藏上一页、下一页按钮。可以将所有部件设置为一个组合,在组合的“鼠标移入时”、“鼠标移出时”添加事件:

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:网站原型图  
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。