# 在华为云Astro轻应用高级页面中使用轮播组件实现图片展示和URL跳转
#### 期望实现效果
高级页面中的轮播组件主要用于多个图片的自动循环切换。您也可以为图片添加超链接，即单击图片，跳转到指定的网站。
图1最终实现效果   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001977558533.gif "点击放大")
#### 功能实现方法
1. 创建一个低代码应用。 
   1. 参考[授权用户使用华为云Astro轻应用并购买实例](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9046.html)中操作，申请华为云Astro轻应用免费试用或购买商业实例。
   
   2. 实例购买后，在华为云Astro轻应用服务控制台的"主页"中，单击"进入首页"，进入应用开发页面。
   
   3. 在"应用"中，单击"新建低代码应用"或单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002134818046.png "点击放大")，进入新建低代码应用页面。
      首次创建应用时，请根据界面提示创建一个命名空间。命名空间一旦创建，不能修改和删除，创建前请确认好相关信息。建议使用公司或团队的缩写作为命名空间。
      
   
   4. 在新建低代码应用页面，应用类型选择"标准应用"，单击"确定"。
   
   5. 输入应用的标签和名称，单击"新建"，即可进入应用设计器。
      图2创建一个空白应用   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002170372113.png "点击放大")
      表1新建空白应用参数说明 
      | 参数 | 说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | 示例      |
      |:---|:---|:---|
      | 标签 | 新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | 我的第一个应用 |
      | 名称 | 新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加***命名空间***__。命名要求如下： - 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。   - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。   | A       |
         
      
   
   
   
   
2. 在应用设计器中，选择"界面"，单击高级页面后的"+"，新建一个高级页面。
3. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001987642661.png)，拖拽轮播组件到右侧画布中。
   
   图3拖入轮播组件   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001925208248.png "点击放大")
   
   
4. 在轮播组件上，单击右键选择"高级设置"。
5. 单击"轮播设置"，根据个人实际需求，设置轮播方向、图片播放时间间隔等。 
   图4选择轮播设置   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001925212196.png "点击放大")
   图5轮播设置   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001952495733.png "点击放大")
   
   
6. 新增轮播图片并设置URL跳转。 
   1. 再次选中轮播组件，单击右键选择"高级设置"，选择"图片管理"。
      图6选择图片管理   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001925213368.png "点击放大") 
   
   2. 单击"添加"，选中所需的图片，单击"保存"。
   
   3. 选中已添加的图片，在右侧图片设置中，单击链接后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001952654205.png)。
   
   4. 设置跳转的URL地址，单击"确定"。
      图7设置链接   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001992462937.png "点击放大") 
   
   
   
   
7. 单击"确定"，返回高级页面。
8. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001925538766.png)，保存高级页面，保存成功后单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001952498389.png)，发布高级页面。
9. 发布成功后，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001952658173.png)，预览效果。