现在选择功能已经实现了，添加一种方式来控制选择哪个项目。

这里有很多选项；例如，你可以提供按钮或支持滑动。为了简单起见，你将在用户点击轮播时更改选中的项目。

更新 render 方法中的 return 语句，添加 @click 表达式：

  return html`
    <div class="fit" @click=${this.clickHandler}>

然后在 render 下方添加 clickHandler 方法：

private clickHandler(e: MouseEvent) {
  const i = this.selected + (Number(!e.shiftKey) || -1);
  this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
  const change = new CustomEvent('change',
    {detail: this.selected, bubbles: true, composed: true});
  this.dispatchEvent(change);
}

clickHandler(e) {
  const i = this.selected + (Number(!e.shiftKey) || -1);
  this.selected = i > this.maxSelected ? 0 : i < 0 ? this.maxSelected : i;
  const change = new CustomEvent('change',
    {detail: this.selected, bubbles: true, composed: true});
  this.dispatchEvent(change);
}

模板中的 @click 表达式在用户点击轮播时调用 clickHandler 方法。事件处理器推进 selected 属性，使用事件的 shiftKey 属性来允许用户向后移动。值在需要时会循环回到第一个或最后一个项目。

由于元素是基于用户交互来更改选中的属性，它应该发送一个描述所发生事件的事件，以便其他应用程序代码可以轻松地做出响应。事件名称为 change，它将选中的项目信息作为 detail 发送。

当元素基于用户交互更改状态时派发事件，而不是在属性被直接设置时派发。

查看 web.dev 上的最佳实践文档了解更多信息。

在预览中试一试，确保一切正常。