中国传媒大学-用户体验与UI交互设计-课件-知识点6.6 Axure中如何应用动态面板实现图片轮播效果.pdfVIP

西安邮电大学 数字艺术学院 目录 CONTENTS 01 02 PART 01 PART 02 引言 案例分析 01 引言 在导航栏的下方有一组自动 滚动的图片，这些图片会根 据淘宝不同的活动自动更新， 一般以广告为主。那么这组 滚动图片的交互是如何实现 的？ 02 案例分析 • 图片是自动轮播的，要做到自动轮播，就要在页面加载时驱动图片，否则无 法自动，只能通过按钮、触摸或滑动动作来驱动图片轮播。 页面加载时 否则 自动轮播 驱动图片 无法自动 • 案例中除了图片轮播，图片下方的小圆点也随着图片的变化而自动同步变化， 以3000MS的速率循环播放。 图片轮播 小圆点虽图片同频率循环播放 3000MS • 要实现这个效果，我们将设置三个动态面板，分别为放置多个图片的动态面板 Photo、放置随图片同频率循环播放的小圆点Dot和一个空的动态面板Null。 动态面板Photo 空的动态面板Null状态改变时触发 动态面板Dot 空动态面板Null 页面载入 Null 自动循环