让组件协同工作

关闭专家模式

专家模式

使用专家模式隐藏针对初学者的 Web 开发指南。

为图像轮播添加交互

在上一个课程中，我们为网站添加了一个图像轮播。现在，我们要改进这个功能。在 Web 开发中，通常会在网站上发布一个功能，然后在收集用户反馈后，随着时间的推移逐步改进它。

我们从测试人员那里收到了关于我们轮播的以下反馈

“我想直接跳转到特定的幻灯片。”
“我不知道我当前在哪个幻灯片上。”
“图像太小了。我看不清图像的细节。”

基于此反馈，我们在 Chico's Cheese Bikes 的产品经理制定了一个计划，以解决图像轮播的这些问题。我们将对图像轮播进行以下改进

点击水平缩略图列表中的图像应该将轮播移动到相应的幻灯片。
点击轮播图像幻灯片应该在弹出窗口中显示该图像的放大版本。

最终，我们将在轮播下方添加一些缩略图图像。这些缩略图将与轮播匹配，就像我们的测试人员希望的那样。

我们将一次实现一个这些需求。在此过程中，我们将引入额外的 AMP 组件，并将它们与事件和操作连接起来。我们还将学习如何通过组合组件并使它们协同工作来构建更精细的用户界面设计。

练习 5：添加缩略图预览

第一步是在我们现有的图像轮播下方添加一组缩略图预览图像。现有的轮播一次只显示一个图像，因为它的 type 设置为 slides。轮播的默认 type 是 carousel。它不是一次显示一个图像，而是水平滚动显示轮播内的所有图像。我们可以通过减小第二个轮播中图像的大小来制作缩略图。

但是，我们还需要使其点击缩略图集合中的图像也能将轮播前进到相应的幻灯片。我们可以将此要求理解为两个更简单要求的组合：1) 检测幻灯片何时被点击，以及 2) 更改轮播的幻灯片。

早些时候，在本培训的处理用户交互部分，我们讨论了事件和操作。“检测点击”听起来像是一个事件。“更改幻灯片”听起来像是一个操作。我们使用 on 属性注册事件。tap 事件是一种检测触摸屏上某项内容被点击或触摸的方式。我们可以在缩略图轮播中的每个图像上处理此事件。

操作类似于我们可以调用组件以使其更改的函数。我们需要找到更改轮播的选定幻灯片的操作。为此，我们查看 <amp-carousel> 文档的行为部分。在那里，我们看到操作 goToSlide() 将轮播前进到特定的幻灯片。goToSlide() 操作像函数方法一样使用：carousel-id.goToSlide(index=N)。在此，carousel-id 是较大轮播组件的 ID，N 是被点击图像的零索引编号（零索引表示第一个图像是 0，第二个图像是 1，依此类推）。

例如，如果我们有以下轮播

<amp-carousel id="myCustomCarousel" type="slides" ...>
    ...
</amp-carousel>

然后点击以下按钮会将上述轮播设置为其第二个幻灯片

<button on="tap:myCustomCarousel.goToSlide(index=1)">
   Set Carousel To Second Slide (Index 1)
</button>

有了这些信息，使用 assets 文件夹中的较小图像，在现有轮播下方添加一个缩略图轮播，并具有以下设置

添加一个类型为 carousel 和 fixed-height 布局类型的 <amp-carousel>。
为每个缩略图图像指定 fixed 布局类型。
按顺序将名为 cheddar-chaser-thumb、cheese-thumb 和 mouse-thumb 的图像添加到轮播中。
使其在点击缩略图图像时，显示原始轮播中相应的图像。提示：原始轮播的 ID 应为 carousel。缩略图图像在轮播中的索引分别为 0、1 和 2。
确保图像具有适当的 tabindex 和 button 角色。

推荐的样式指南

为缩略图轮播指定 height 为 78。
为缩略图轮播指定 thumbnail-carousel 类。
为每个缩略图图像指定以下大小属性：width="96" height="72"。

完成后，你的页面应该看起来像这样

带有图像缩略图的轮播

解决方案

<amp-carousel layout="responsive" width="412" height="309" type="slides" loop id="carousel">
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
        width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>
<amp-carousel class="thumbnail-carousel" layout="fixed-height" width="auto" height="78">
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser-thumb.jpg?1540228250623"
        on="tap:carousel.goToSlide(index=0)" width="96" height="72" layout="fixed" role="button" tabindex="0"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese-thumb.jpg?1540228249992"
        on="tap:carousel.goToSlide(index=1)" width="96" height="72" layout="fixed" role="button" tabindex="1"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse-thumb.jpg?1540228249062"
        on="tap:carousel.goToSlide(index=2)" width="96" height="72" layout="fixed" role="button" tabindex="2"></amp-img>
</amp-carousel>

练习 6：跟踪选定的缩略图

接下来，我们希望用户选择的缩略图看起来与其他缩略图不同，以便他们知道自己选择了什么。使用我们目前构建的内容无法做到这一点，因为无法跟踪主轮播所在的幻灯片。为了满足此要求，我们需要一个 AMP 组件，该组件允许用户从列表中进行选择并跟踪他们的选择。

<amp-selector> 组件提供一个选项菜单，并允许用户从中选择。任何 HTML 或其他 AMP 组件都可以包含在 <amp-selector> 组件中并深度嵌套（另一个 <amp-selector> 组件除外）。可选择的选项由具有 option 属性的元素和/或组件确定。每当选择一个选项时，该元素或组件也会被赋予 selected 属性。selected 属性可通过 CSS 定位，因此我们可以使用它为当前选定的图像添加独特的样式。

如果我们现在实现 <amp-selector>，我们会注意到如果用户手动更改较大轮播上的幻灯片，则选定的缩略图不会更改。我们需要一种方法来检测较大轮播上幻灯片何时更改，并将其用作在 <amp-selector> 组件中设置选定缩略图的触发器。“检测幻灯片何时更改”听起来像是一个事件。“设置选定的缩略图”听起来像是一个操作。在文档中，我们看到 <amp-carousel> 允许你对类型为 slides 的轮播使用 slideChange 事件，其中新幻灯片的索引为 event.index。这可以让你知道轮播何时移动到给定的幻灯片。

我们还在文档中看到 <amp-selector> 公开了一个名为 toggle 的操作，该操作接受一个索引，并在相应的选项中添加或删除 selected。如果 <amp-selector> 组件只允许进行单项选择，则切换不同的选项也会导致从所有其他选项中删除 selected 状态。

通过以下规范实现视觉上区分选定缩略图的功能

添加一个 ID 为 ampSelector、名称为 single_image_select 和布局为 container 的 <amp-selector> 组件，该组件围绕缩略图图像的 <amp-carousel>。
将一个 option 属性添加到每个缩略图图像组件，其 value 与图像在轮播中的索引匹配。
向较大的图像轮播添加一个事件处理程序，该处理程序在轮播的幻灯片更改时切换相应的图像选项。

推荐的样式指南

只要您遵循了指南，样式就已经包含在文件顶部的 CSS 中，无需编辑。如果您想查看规则，可以使用标识符 amp-selector amp-img[option] 和 amp-selector amp-img[option][selected] 查看它们。

完成之后，结果应该如下所示

样式缩略图轮播的图像

解决方案

<amp-carousel on="slideChange:ampSelector.toggle(index=event.index)"
    layout="responsive" width="412" height="309" type="slides" loop id="carousel">
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
        width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>
<amp-selector layout="container" name="single_image_select" id="ampSelector">
    <amp-carousel class="thumbnail-carousel" layout="fixed-height" width="auto" height="78">
        <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser-thumb.jpg?1540228250623"
            option="0" selected on="tap:carousel.goToSlide(index=0)" tabindex="1" role="button"
            width="96" height="72" layout="fixed"></amp-img>
        <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese-thumb.jpg?1540228249992"
            option="1" on="tap:carousel.goToSlide(index=1)" tabindex="1" role="button"
            width="96" height="72" layout="fixed"></amp-img>
        <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse-thumb.jpg?1540228249062"
            option="2" on="tap:carousel.goToSlide(index=2)" tabindex="1" role="button"
            width="96" height="72" layout="fixed"></amp-img>
    </amp-carousel>
</amp-selector>

请记住在 <head> 中包含 <amp-selector> 库

<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

练习 7：放大轮播图片

最后，我们希望在用户点击轮播图片时放大它，以便更详细地显示。一种常用的方法是使用灯箱。灯箱组件会选取一个元素（例如图像）并将其放置在页面上其余内容之上。因此，您可以专注于该图像或元素，页面的其余部分会被半透明背景部分遮挡。

<amp-image-lightbox> 是一个全屏弹出组件，它实现了灯箱模式。如果您在 <amp-img> 组件的事件处理程序中包含 <amp-image-lightbox> 的 ID，则会出现一个包含该图像的灯箱，并扩展直到灯箱充满整个屏幕。例如，将以下代码添加到页面顶部的大图像，以了解灯箱方法的工作原理

<amp-image-lightbox id="ricotta-racer-lightbox" layout="nodisplay"></amp-image-lightbox>
<amp-img on="tap:ricotta-racer-lightbox" role="button" tabindex="0" src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fricotta-racer.jpg?1540228217746" layout="responsive" width="640" height="480"></amp-img>

请记住在 <head> 中包含 <amp-image-lightbox> JavaScript

<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

我们可以将此方法应用于我们较大的轮播中的每个图像，以实现我们的需求。但是，还有一种更自然的方法可以完成相同的操作。 <amp-lightbox-gallery> 组件通过添加 lightbox 属性扩展了 <amp-img> 和 <amp-carousel> 组件的行为。具有 lightbox 属性的组件在单击时将打开一个样式化的灯箱。无需使用 <amp-image-lightbox> 连接，也无需在图像或轮播上使用点击处理程序在灯箱中打开。

要在我们较大的轮播上实现灯箱效果

将 <amp-lightbox-gallery> 脚本添加到您的 <head> 中。
将 lightbox 属性添加到您较大的 <amp-carousel> 中。

解决方案

<amp-carousel on="slideChange:ampSelector.toggle(index=event.index)"
    layout="responsive" width="412" height="309" type="slides" loop id="carousel" lightbox>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"
        width="412" height="309" layout="responsive"></amp-img>
    <amp-img src="https://cdn.glitch.com/d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"
        width="412" height="309" layout="responsive"></amp-img>
</amp-carousel>

请记住在 <head> 中包含 <amp-lightbox-gallery> 库

<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>