axure动态面板-轮播图

效果图

axure动态面板-轮播图_第1张图片

需求描述

  1. 页面加载自动轮播
  2. 光标移入,停止轮播,显示箭头,并且点击箭头可以切换轮播
  3. 下方有小圆点,原点可以根据状态改变而改变

具体实现

一、拖入元件完成基本样式

**1.拖入动态面板 -》添加状态 -》页面载入自动轮播 **
axure动态面板-轮播图_第2张图片
axure动态面板-轮播图_第3张图片
2. 光标移入停止轮播,显示箭头,并且点击箭头可以切换轮播
注意:当箭头不可以轮播时,将箭头放置在每个state中或者换个浏览器试一下
axure动态面板-轮播图_第4张图片
axure动态面板-轮播图_第5张图片
axure动态面板-轮播图_第6张图片
axure动态面板-轮播图_第7张图片
3. 下方有小圆点,原点可以根据状态改变而改变
注意:小圆点要设置到动态面板上
设置完圆点样式以后,要为每个圆点添加选中样式,作为轮播时的状态改变的样式
axure动态面板-轮播图_第8张图片
选中每一个圆点,为圆点添加选项组,防止轮播的时候全部选中
axure动态面板-轮播图_第9张图片
axure动态面板-轮播图_第10张图片
点击圆点,切换状态

你可能感兴趣的:(axure)