轮播图在日常的原型设计中是最常见的了,今天和大家分享如何制作自动轮播+手工点击切换。
![3f74f84f7684b639f7fbe70887f10243.png](https://i-blog.csdnimg.cn/blog_migrate/3a92368500e48db3b827f9b05a6664b3.jpeg)
思路:
- 面载入时,图片会自动轮播;
- 点击下方对应的图片,会跳转到图标对应的界面;
- 点击左右按钮,既可朝左朝右有顺序的翻动界面。
下面正式开始:
1. 所需组件,自己想做啥就做啥,不过有几个界面就有几个按钮,不要多也不要少。
![33a4516e2b616159e3ece711d7e06a6a.png](https://i-blog.csdnimg.cn/blog_migrate/b4792ae99e2fd7c53a364b3b3314b08f.jpeg)
2. 主界面矩形设置为动态面板,点击动态面板添加4个状态,每种状态可由颜色区分开来,或者做成你所要设置的样子。
![8f97b956885c622ff8c3911ef6a7a748.png](https://i-blog.csdnimg.cn/blog_migrate/a1c42448991023006f9e4962785c314f.jpeg)
3. 设置完成后,要让每个圆形图标对应到我们所设动态面板的每个状态,每个圆形对应一个状态(1-4圆形都这样设置)。
![2fa45a3bb2f002f35fc464a160ef775d.png](https://i-blog.csdnimg.cn/blog_migrate/6f949d8c2cc395cc9291478cb2e1fd06.jpeg)
![075bc0fac5164f1bb35093e9097f832d.png](https://i-blog.csdnimg.cn/blog_migrate/9e9d45e2f8e21642eb648fd0cc1b1740.jpeg)
4. 设置主界面(动态面板)载入时进行轮播,这里的转动时间和交互动画随自己的喜好来慢慢调整既可。
![fcfd423c9eeb2c7f158ba0f3da0e041a.png](https://i-blog.csdnimg.cn/blog_migrate/54aabb47395cbd57612398b0152cc6ef.jpeg)
5. 设置左右手工翻动轮播图,点击“>”,朝右翻动图片,朝左,同理。
![95154c1ab4d54bb4b41cdcc47dd8afcf.png](https://i-blog.csdnimg.cn/blog_migrate/6b2a9fe0075681d032c8ec5d6fc52dde.jpeg)
6. 全设置完后,会是这样
![157fd081011153fcf943be2bd924d55c.png](https://i-blog.csdnimg.cn/blog_migrate/1255a33cf49f259b77b1a4e4b75d096a.jpeg)
7. 点击预览,轮播图效果就完成啦!
![422efd2d2b4b4b5330663df83931d8ba.gif](https://i-blog.csdnimg.cn/blog_migrate/8fdd6c56fa66b27aeec417126b6c7f06.gif)
作者:妖怪口袋,微信公众号“妖怪口袋”
本文由 @妖怪口袋 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议