1.先保存五张图片(几张都可以)。

2.将元件库里的“动态面板”拉到制作面板。

3.双击点开“动态面板”,在上面有状态1(State1),点击它,可以添加状态,我们保存了五张图片就再添加四个状态。状态框大小可以设置为1000*400。

 

 

4.在每个状态里面放入元件库中的“图片”,并导入保存的图片。图片大小自然也是1000*400。

5.将这个动态面板命名为“轮播图”。

 

6.将元件库里的“圆形”拖拽到制作面板中,大小设置为25*25,可以将其复制粘贴为五个,并且给每个圆形分别命名为轮播按钮1,2,3,4,5。将其组合起来,组合名命为轮播按钮组合。

7.每个轮播按钮都需要新建交互:

(1)单击时:

       a.设置面板状态:目标选为轮播图,STATE设为“State1(State2,3,4,5)”,进入动画为“逐渐”“200”毫秒。

 

       b.设置面板状态:选中轮播图,STATE选择“下一项”,勾选向后循环,进入动画设置为“逐渐”,动作时间设为“200(或300)”,点击“更多选项”,勾选循环间隔,设为2000毫秒。

 

(2)载入时:点击“设置选中”,目标选择“轮播按钮1”。(只设置轮播按钮1)

 

8.每个轮播按钮都设置交互样式:在交互页面底部有交互样式,点击“添加交互样式”,点击“元件选中”,勾选“填充颜色”,设置自己需要的颜色。

9.单击右键将轮播按钮组合设置为选项组,命名为“按钮”。并且将每个轮播按钮都设置为选项组“按钮”。

10.点中轮播图,新建两个交互:

(1)点击“载入时”,再点击“设置面板状态”,选中轮播图,选择下一项,勾选向后循环,进入动画设置为“逐渐”,动作时间设为“200(或300)”,点击“更多选项”,勾选循环间隔,设为2000毫秒。

(2)点击“状态改变时”,点击“添加情形”,分别设置五个情形(情形1,情形2,情形3,情形4,情形5),并在每个情形下添加动作,点击“设置选中”,目标选我们需要的元件,轮播按钮1,2,3,4,5。如图依次设置情形:

 

 11.将其在浏览器中预览。

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐