本节,将介绍利用动态面板实现图片的自动轮播。
具体的轮播效果可以参阅京东、淘宝、天猫等的首页轮播图。
初始页面:
效果页面:
效果说明:
页面载入时,呈现给用户第一张banner,一会后banner自动从左向右循环轮播,同时下方的指示器指示到相应的位置。
思路分析:
1)载入时,动态面板呈现首个状态, 延时几秒后,动态面板的状态自动向后循环,每个状态下均会停留几秒,方便用户查看。
2)如果动态面板的状态处于第一个,即第一张banner,下方的指示器选中第一个,呈现为橙色;动态面板处于第几个banner,下方的指示器就选中第几个指示元件,并且该指示元件呈现橙色。故此,这里需要用到条件判断。
页面元件:
效果制作:
1.载入时,图片自动轮播
2.为指示圆设置选中时的样式
3.设置指示器的指示状态
另外几个指示器的设置与上述相同。
所有用例设置完成后,交互用例如下图所示。
按照上述步骤设置完成后,按住F5预览即可看到效果。