淘宝banner效果制作

淘宝banner效果制作"/>

淘宝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刷新
就可以看到效果。