一个负责维护世界和平的产品经理。
一、元件准备
(1)拖入一个动态面板到画布中,为其命名为banner。双击动态面板打开【面板状态管理】窗口,点击【+】,为动态面板添加4个状态。
(2)双击State1,并添加一张与动态面板一样大小的图片。
(3)用同样的方式,为动态面板的其他3个状态添加图片。
(4)在动态面板上拖入4个椭圆,为每一个椭圆添加“选中”状态,并依次设置椭圆的名称为button1~button4。
(5)为了避免重复选中,需要给4个button建立一个选项组,如果不理解为什么要建立选项组的童鞋 ,可以取消选项中试一下。
(6)当我们打开某一个页面时,banner的第一个总是默认选中的。所以,双击button1,在“属性”面板中,设置button1的默认状态为“选中”。
二、添加交互
(7)为动态面板添加“载入时”事件case1,添加动作为【设置面板状态】banner为【next】,勾选【向后循环】与【循环间隔】,循环间隔时间自行设置,并设置动画为向左滑动。
(8)为动态面板的“状态改变时”添加事件case1,添加判断条件为:当【面板状态】banner【==】【状态】State1时。
(9)添加动作为【选中】button1。
(10)按照相同的方法添加case2事件,当【面板状态】banner【==】【状态】State2,添加动作为【选中】button2,依次类推,依次设置case3,case4.事件交互设置如下图:
(11)为动态面板的State1状态下的图片添加“鼠标单机时”事件,打开所要链接的页面即可。
妥妥滴,预览查看效果吧~
网友评论