### 轮播图组件就是设置图片滚动效果的组件。点击“![](https://img.kancloud.cn/89/f1/89f1429669988d3391548262b2baa523_17x17.png)”图标,再点击“轮播图”,即可创建轮播图,如图4.31; ![](https://img.kancloud.cn/4d/26/4d2679fc6aba0a52261faf5669cfcc69_744x432.png) ![](https://img.kancloud.cn/38/e8/38e892dbb455d2d1d0d1ce530fd8b4cb_803x45.png) ## **一、组件名称设置** ### 选中该轮播图组件,在操作界面右侧的“图层名称”处可修改组件的名称,如图4.32。(名称最好要设置一下,方便后期组件管理) ![](https://img.kancloud.cn/04/11/041163231fc6b74e9f451ab5a4598444_1075x435.png) ![](https://img.kancloud.cn/6f/3d/6f3d2f0d270e8c9831bef02d7f6433be_802x48.png) ## **二、基本样式设置** ### 1. 图片类型 ### 选中该轮播图组件,在操作界面右侧的“类型”处可设置组件的类型,如图4.33;图片类型分为:立体和普通; * ### 普通:我们常见的轮播图样式,效果图如图4.34; * ### 立体:立体效果的轮播图,效果图如图4.35; ![](https://img.kancloud.cn/95/17/95177d1e4437c835c1a11ac4fbfec5f9_965x649.png) ![](https://img.kancloud.cn/22/3c/223c162b8e7b4962b02f6fd8f283e13e_804x45.png) ![](https://img.kancloud.cn/6a/53/6a53ae7ddb6fa5fe0854d5c227bef33e_467x271.png) ![](https://img.kancloud.cn/c0/e3/c0e3065b02bc7e9acb92ec2cb98fca26_805x49.png) ![](https://img.kancloud.cn/f0/8a/f08a6ad0553a4aacdfbd7937d7aa2f00_477x288.png) ![](https://img.kancloud.cn/b1/ef/b1ef5285202d874809ddd3eb92f6c262_801x40.png) ### 2. 轮播时间 ### 选中该轮播图组件,在操作界面右侧的“轮播时间”处可设置组件的轮播时间,如图4.36; * ### 如果你想让图片5秒切换到下一张,将轮播时间设置成“5000”; ![](https://img.kancloud.cn/93/84/9384528f4d821d1e142c3fe8a19f3872_979x641.png) ![](https://img.kancloud.cn/e3/1d/e31d78b2499d7bfe0f3b6ac949974da9_800x47.png) ### 3. 选择器 ### 选中该轮播图组件,在操作界面右侧的“选择器”处可设置组件底部提示线的显示与否,如图4.37。 * ### 外部:组件底部提示线显示; * ### 不显示:组件底部提示线不显示; ![](https://img.kancloud.cn/38/10/381011009ea805da4fa8a9e872a13ffc_1017x650.png) ![](https://img.kancloud.cn/bb/9d/bb9df544839a2d2fcc08cd648dd9f36b_794x54.png) ### 4. 轮播方向 ### 选中该轮播图组件,在操作界面右侧的“轮播方向”处可设置轮播图的轮播方向,如图4.38。 * ### 竖向:竖着轮播,如图4.381; * ### 横向:横着轮播,图4.382; ![](https://img.kancloud.cn/6d/f7/6df7f58d03023ac6ab974cf9c2836b44_978x634.png) ![](https://img.kancloud.cn/f6/dd/f6dd31634c3f1455ece1b7b13e036e33_805x41.png) ![](https://img.kancloud.cn/b8/3b/b83b8c02d2ef410871856044fbf288ae_967x330.png) ### 5. 图片透明度 ### 选中该轮播图组件,在操作界面右侧的“透明度”处可设置图片透明度,如图4.39。 ![](https://img.kancloud.cn/96/45/964503a4dc1b966b3467f97c4bb3318f_962x638.png) ![](https://img.kancloud.cn/81/be/81be4c2931d85dfa3358701c69b58b5e_800x37.png)