完成了上一节内容的学习后，在您的应用界面上已经显示了一个基础的文本与图片，在本节内容中我们希望实现快速入门案例中的运营推荐位效果。
一、介绍
根据本教程进行学习，您可以选择从上一教程结束时构建完成的项目开始，也可以直接运行02_StartingPoint文件夹中的项目。
02_StartingPoint文件夹：截止到本节内容之前不包括本节内容的所有代码
根据教程中的提示使用02_Resources文件夹中的文件。
02_Resources文件夹：本节内容中需要用到的图片、文本等资源文件
如果您想要自行探索，可以直接打开02_Complete文件夹中的项目并浏览代码。
02_Complete文件夹：根据本节内容逐步操作后，得到的包括之前章节内容及本节内容的代码包
项目文件下载
下载项目文件开始构建本项目，请根据以下步骤操作：
项目文件下载 02_UseSwiperToBuildBanner.zip
二、Banner数据结构设计
要实现Banner位，先让我们看看Banner位的数据结构设计。
1. 根据设计图可以看到快速入门Banner运营位由多张图片资源构成，于是我们可以在Index.ets文件中创建一个BannerClass类，用于表示每张图片资源的数据结构。
// entry/src/main/ets/pages/Index.ets
class BannerClass {
}
@Entry
@Component
struct Index {
@State message: string = '快速入门';
build() {
Column() {
Text(this.message)
.fontSize(24)
.fontWeight(700)
.width('100%')
.textAlign(TextAlign.Start)
.padding({
left: 16 })
.fontFamily('HarmonyHeiTi-Bold')
.lineHeight(33)
Banner()
}
.height('100%')
.width('100%')
.backgroundColor('#F1F3F5')
}
}
@Preview
@Component
struct Banner {
build() {
Image($r('app.media.banner_pic1'))
.objectFit(ImageFit.Contain)
.width('100%')
.padding({
top: 11, left: 16, right: 16 })
.borderRadius(16)
}
}
2. 我们为BannerClass添加id属性，用于唯一标识每一张图片资源，在之后的ForEach内容中我们会看到其作用。
// entry/src/main/ets/pages/Index.ets
class BannerClass {
id: string = '';
}
// ...
3. 为BannerClass添加imageSrc属性，用于存储图片地址，此处定义为ResourceStr类型，其为Resource类型与string类型的联合类型。Resource类型在加载本地图片资源时会用到的，而string类型在加载网络图片资源时会用到。
imageSrc: ResourceStr = '';
4. 为BannerClass添加url属性，用于存储Banner图片点击后跳转到的在线网页地址，在之后的跳转功能中会用到。
url: string = '';
5. 为BannerClass添加构造函数，使用传入的id、imageSrc与url作为实例化对象的对应属性值。
constructor(id: string, imageSrc: ResourceStr, url: string) {
this.id = id;
this.imageSrc = imageSrc;
this.url = url;