手滑式图库组件

AMPHTML 广告视频广告图片广告均不支持此组件。

通过手滑式图库组件,您可以创建简单的图库,以便用户通过向前和向后滑动来浏览一系列不同的图片或一系列不同的。您可以在动态广告中使用手滑式图库。

选择适当的图库

Google Web Designer 有 4 种不同的图库组件:

  • 360° 图库会显示对象不同角度的图片,使您能够前后滑动来旋转对象。360° 图库无法显示组或导航元素。
  • 手滑式图库具有简单的平面外观,可让您纵向或横向滑动图片或组。
  • 轮播式图库与手滑式图库类似,但轮播式图库会用 3D 外观显示相邻图片,就好像使用旋转显示器显示它们一样。
  • 过渡效果图库可在您从一张图片切换到下一张图片的过程中提供一系列动画效果。

如需使用手滑式图库,请按以下步骤操作:

  1. 打开组件面板,然后打开图库文件夹。

  2. 手滑式图库 组件拖动到场景中。

  3. 属性面板的手滑式图库属性部分,为该组件命名。

  4. 添加一系列图片或。使用组可以显示非图片元素,或在单个帧中显示多个元素。

    • 如需添加图片,请使用下列方法之一:
      • 找到属性面板的“手滑式图库”属性部分,然后在图片字段中添加图片网址(以英文逗号分隔)。

      • 属性面板的“手滑式图库”属性部分,点击选择图库图片 按钮。您可以点击选择文件按钮来浏览图片文件,也可以直接将文件拖动到对话框中。

    • 要向图库中添加组,请执行以下操作:

      • 找到属性面板的“手滑式图库”属性部分,在字段中添加一系列组名称(以英文逗号分隔)。
  5. (可选)调整该组件的属性(如下所述)。

在手滑式图库中使用组

手滑式图库中可以包含一系列图片或组。通过组,您可以使用非图片素材资源(例如视频),也可以在图库的单个帧中使用多个素材资源(例如带文字说明的图片)。

当您使用视频或其他互动式素材资源时,请在“属性”面板中选择停用滑动浏览功能,以便用户与视频控件互动。您可以使用图库导航组件,以便用户在图库的不同帧之间进行切换。

如需创建显示图片和组的图库,请先将您要使用的图片转换成组。

您还可以使用组在图库中显示多个动态元素

如需重排或移除图库中的图片,请按以下步骤操作:

  1. 属性窗格的“手滑式图库”属性部分,点击选择图库图片 按钮。
  2. 如需重排某张图片的位置,请将其拖动到新位置;如需从图库中移除某张图片,请将鼠标悬停在该图片上,然后点击删除 按钮。
  3. 点击确定

属性

属性 说明
名称 为“手滑式图库”设置名称。
图片 可让您选择要在图库中使用的图片。可以绑定到动态数据
要在图库中使用的组列表(以英文逗号分隔)。可以绑定到动态数据
过渡时间 切换图片时的过渡时长(以毫秒为单位)。
开始帧 一开始显示的图片的编号。
要显示的帧数 图库中每次显示的帧数。
每滑动一下浏览的帧数 每滑动一下前进的帧数。
自动播放 如果选中该属性,系统会自动轮换播放图库中的图片。
包括导航 如果选中该属性,则会加入用于浏览图库的导航图标。
使用缩略图 与“包括导航”一同被选中后,将显示用于导航的缩略图(而不是图标)。
突出显示颜色 设置导航图片的突出显示颜色。
缩放方式 确定各种尺寸的图片在尺寸固定的帧中如何显示:
  • 将图片调整为合适尺寸 - 视需要按比例调整图片大小以适应帧尺寸,而不剪裁图片。如果图片和帧的宽高比不同,则会添加内边距。
  • 剪裁图片以覆盖整个可用空间 - 调整图片大小以填满整个帧。如果帧和图片的宽高比不同,则会视需要剪裁图片。
  • - 在帧的中央位置以原始尺寸显示图片。如果图片比帧小,则会将多余区域填充为透明。如果图片比帧大,则会剪裁图片。
  • 拉伸图片以覆盖整个可用空间 - 视需要调整图片大小并进行拉伸,以在不剪裁图片的情况下适应相应帧的尺寸。
方向 确定图片在图库中是横向移动还是纵向移动。

高级属性

如需显示高级属性,请在组件属性窗格中点击高级属性对应的“展开”图标

高级属性 说明
帧偏移量 图片的间距。
帧宽度 图库中的图片帧的宽度(以像素为单位)。
帧高度 图库中的图片帧的高度(以像素为单位)。
自动播放时长 图库从第一帧到最后一帧的播放时长(以毫秒为单位)。该时长会在各张图片之间平分,除非您另外选择了自动播放间隔时间
自动播放间隔时间 “自动播放”处于启用状态时,每张图片的显示时长(以毫秒为单位)。图片会按此时长播放,直到达到总的自动播放时长为止。如有必要,系统会多次循环播放图片。
退出网址 一系列网址(以英文逗号分隔),与图库中的各个帧相对应。可以绑定到动态数据
停用滑动浏览功能 一个可用于为图库停用滑动导航功能的复选框。选中此复选框后,用户可以与相应帧中的元素互动,而此互动不会意外更改相应帧。此复选框处于选中状态时,您可以使用“包括导航”属性或“图库导航”组件来更改帧。
退出帧时暂停播放媒体 该属性处于选中状态时,系统会在退出当前帧后,暂停正在该帧中播放的音频或视频(以避免不想播放的内容在后台播放)。
进入帧时继续播放媒体 如果选中该属性,系统会在进入下一帧后开始播放该帧中所有已暂停的音频或视频。

事件和操作

手滑式图库组件发送的事件

您可以根据以下手滑式图库组件事件触发其他操作:

事件 说明
首次互动 用户首次与图库互动时发送。
已观看所有帧 图库的所有帧至少都已展示过一次时发送。
已加载图片 图库的所有帧均已加载时发送。
自动播放已结束 当自动播放因任何原因结束时发送。
已显示帧 每个新帧显示完毕时发送。
帧被激活 帧开始出现变化时发送。
已自动播放帧 自动播放期间帧自动显示时发送。
点按帧 用户点击帧时发送。
左端 图库在用户滑动后达到最左端时发送。
右端 图库在用户滑动后达到最右端时发送。
鼠标悬停在帧上 鼠标移到帧上时发送。
鼠标位于帧外 鼠标从帧上移开时发送。
跟踪开始 当鼠标拖动/触摸拖动操作开始时发送。
跟踪 组件将记录鼠标拖动/触摸拖动操作的 X 轴和 Y 轴位置数据
跟踪结束 当鼠标拖动/触摸拖动操作结束时发送。

如需在事件对话框中选择上述某个事件,请将“手滑式图库”组件设为目标

手滑式图库组件执行的操作

以下手滑式图库组件操作可由其他事件触发:

操作 配置选项
转至帧
  • 帧号
  • 动画 -“none”或“slide
旋转一次
  • 旋转时间 - 以毫秒为单位的时间
  • 方向 -“forwards”或“backwards
停止旋转
前进
后退

事件对话框中选择上述某个操作时,请将“手滑式图库”组件设为接收方

了解如何配置事件

预览

在场景中,手滑式图库仅会显示开始帧,以便您大致了解该组件的呈现效果。如需查看该组件实际的完整呈现效果,请点击右上角的预览按钮,在首选浏览器中预览文档

该内容对您有帮助吗?

您有什么改进建议?
搜索
清除搜索内容
关闭搜索框
主菜单
11710526789026283810
true
搜索支持中心
true
true
true
true
true
5050422
false
false