0

大家好， 我有一页 index.html 的源代码，我从这里拿的

我有一个文件 story.html - 包含 6 个 AMP 页面的 AMP 故事

如何在 AMP 历史记录中指定 AMP 页面的路径

我读了这个文档

我试过/stories/knife1/story.html/#page-1

和/stories/knife1/story/#page-1

和/stories/knife1/story.html/page-1

但它不起作用

第一个 AMP 页面始终打开并继续播放

在我的 index.html 中，我有这段代码

<div class="entry-point-container">
                <div class="circular-entry-point">
                  <div class="entry-points">
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-31-08.jpg" style="border-color:#FF6F32">
                      <span class="entry-point-card-title">Q&A with ZOE Newman</span>
                    </div>
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-39-29.jpg" style="border-color:#EF7E31">
                      <span class="entry-point-card-title">24 Hours in New York City</span>
                    </div>
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-39-31.jpg" style="border-color:#EF7E31">
                      <span class="entry-point-card-title">The Next King of the Sea</span>
                    </div>
                    <div class="entry-point-card-container">
                      <img src="img/products/new/knife1/photo_2021-06-05_16-40-09.jpg" style="border-color:#EF7E31">
                      <span class="entry-point-card-title">Spark a Passion for Reading</span>
                    </div>
                    <div class="entry-point-card-container">
                        <img src="img/products/new/knife1/preview1.png" style="border-color:#FF6F32">
                        <span class="entry-point-card-title">Spark a Passion for Reading</span>
                    </div>
                    <div class="entry-point-card-container">
                        <img src="img/products/new/knife1/preview2.png" style="border-color:#EF7E31">
                        <span class="entry-point-card-title">The Next King of the Sea</span>
                      </div>
                  </div>
                </div>
              </div>
{“行为”：{“自动播放”：假，“pageScroll”：假}，“控件”：[{“名称”：“关闭”，“位置”：“开始”}]}

我使用这个 JS 代码。也许是这样？

const player = document.body.querySelector("amp-story-player");
const lightboxEl = document.querySelector(".lightbox");

if (player.isReady) {
  initializeCarousel();
} else {
  player.addEventListener("ready", () => {
    initializeCarousel();
  });
}

function initializeCarousel() {
  const stories = player.getStories();

  const thumbnails = document.querySelectorAll(
    ".entry-point-card-container img"
  );
  console.log(thumbnails);

  thumbnails.forEach((img, idx) => {
    img.addEventListener("click", () => {
      player.show(stories[idx].href);
      player.play();
      lightboxEl.classList.toggle("show");
    });
  });
}

player.addEventListener("amp-story-player-close", () => {
  player.pause();
  lightboxEl.classList.toggle("show");
});
4

0 回答 0