Skip to main content

本节,将介绍利用动态面板实现图片的自动轮播。
具体的轮播效果可以参阅京东、淘宝、天猫等的首页轮播图。


初始页面:

效果页面:

效果说明:
页面载入时,呈现给用户第一张banner,一会后banner自动从左向右循环轮播,同时下方的指示器指示到相应的位置。

 

思路分析:
1)载入时,动态面板呈现首个状态, 延时几秒后,动态面板的状态自动向后循环,每个状态下均会停留几秒,方便用户查看。
2)如果动态面板的状态处于第一个,即第一张banner,下方的指示器选中第一个,呈现为橙色;动态面板处于第几个banner,下方的指示器就选中第几个指示元件,并且该指示元件呈现橙色。故此,这里需要用到条件判断。

 

页面元件:

 

效果制作:
1.载入时,图片自动轮播

 

2.为指示圆设置选中时的样式

 

3.设置指示器的指示状态

 

另外几个指示器的设置与上述相同。
所有用例设置完成后,交互用例如下图所示。

按照上述步骤设置完成后,按住F5预览即可看到效果。

0 0 vote
Article Rating
订阅
提醒
guest
0 评论
Inline Feedbacks
View all comments