### 轮播图组件就是设置图片滚动效果的组件。点击“”图标，再点击“轮播图”，即可创建轮播图，如图4.31；   ## **一、组件名称设置** ### 选中该轮播图组件，在操作界面右侧的“图层名称”处可修改组件的名称，如图4.32。（名称最好要设置一下，方便后期组件管理）   ## **二、基本样式设置** ### 1\. 图片类型 ### 选中该轮播图组件，在操作界面右侧的“类型”处可设置组件的类型，如图4.33；图片类型分为：立体和普通； * ### 普通：我们常见的轮播图样式，效果图如图4.34； * ### 立体：立体效果的轮播图，效果图如图4.35；       ### 2\. 轮播时间 ### 选中该轮播图组件，在操作界面右侧的“轮播时间”处可设置组件的轮播时间，如图4.36； * ### 如果你想让图片5秒切换到下一张，将轮播时间设置成“5000”；   ### 3\. 选择器 ### 选中该轮播图组件，在操作界面右侧的“选择器”处可设置组件底部提示线的显示与否，如图4.37。 * ### 外部：组件底部提示线显示； * ### 不显示：组件底部提示线不显示；   ### 4\. 轮播方向 ### 选中该轮播图组件，在操作界面右侧的“轮播方向”处可设置轮播图的轮播方向，如图4.38。 * ### 竖向：竖着轮播，如图4.381； * ### 横向：横着轮播，图4.382；    ### 5\. 图片透明度 ### 选中该轮播图组件，在操作界面右侧的“透明度”处可设置图片透明度，如图4.39。   ## **三、接口设置** ### 1\. 数据类型 ### 数据类型分为静态数据和动态数据； * ### 静态数据：写死的数据； * ### 动态数据：会随着接口传过来的数据实时变化；（一般这种比较常用） ### 2\. 接口地址 ### （1）静态数据，接口地址传过来的内容要符合以下格式： ~~~ [{"value":"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"},{"value":"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4238142487,3274484296&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2394972844,3024358326&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"},{"value":"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4238142487,3274484296&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2394972844,3024358326&fm=26&gp=0.jpg"},{"value":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVq8ZVBlQLcZMHXjm21FMbF4oMmyCucZZav2s_wcd_Wkosp4060g&s"},{"value":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4QJcBTHThqzbA9Of6HzW2i1apf5k2i2iIaQQPLR0UT2AOH7ke&s"}] ~~~ ### （2）动态数据，接口地址传过来的内容要符合以下格式： ~~~ {"data":[{"value":"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"},{"value":"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4238142487,3274484296&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2394972844,3024358326&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"},{"value":"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4238142487,3274484296&fm=26&gp=0.jpg"},{"value":"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2394972844,3024358326&fm=26&gp=0.jpg"},{"value":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVq8ZVBlQLcZMHXjm21FMbF4oMmyCucZZav2s_wcd_Wkosp4060g&s"},{"value":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4QJcBTHThqzbA9Of6HzW2i1apf5k2i2iIaQQPLR0UT2AOH7ke&s"}]} ~~~ ### 3\. 刷新时间 ### 这个参数主要针对动态数据设置的，完成数据的实时更新。 * ### 如果你想设置成5秒刷新一次，可以将刷新时间设置成“5000”； ### 4\. 刷新数据 ### 这个参数主要是重新请求以下接口，完成数据的更新。