淘宝banner效果制作

   

   网站首页banner轮播原型制作，环境axure 7.0，宽：710mm，高：240mm的banner图片3张

1、添加banner图片

放置“动态面板”

设置banner位置和大小

动态面板命名为：banner

 

双击动态面板，弹出“状态框”，添加状态共计3个，并修改名字分别为“banner1”、“banner2”、“banner3”。

 

进入“状态banner1”并添加部件“图片”在banner1状态中中。

 

双击部件“图片”选取事先准备好的banner1。不对图片进行优化选择“NO”，

 

对图片进行自动调节，选择“yes” 

 

调整图片位置，与动态面板框吻合，并对图片分别进行命名。

同样方法完成其余两张banner添加。

2、动态面板交互设计

（1）、页面载入时：

完成效果

 

（2）、图片轮播设置“onPanelStateChange”交互

添加条件

当动态面板“banner”等于状态“banner1”时等待2.5秒,然后动态面板赋值与“banner2”

同理：

3、预览

点击预览按钮，或是F5刷新

就可以看到效果。