问题描述
您好，我的网站上有一张图片幻灯片，我希望将其设置为显示最后一张图片时自动将访问者带到注册页面的位置。我需要做什么才能进行设置？
我使用了一个幻灯片模板，这是我在 youtube 上找到的幻灯片模板，在 youtube 视频中，他们称之为 amp 故事页面。我复制并粘贴了下面的代码。
* {
Box-sizing: border-Box;
}
amp-story * {
font-family: 'Helvitica Nueve',sans-serif;
color: white;
}
amp-story-page {
background: white;
}
amp-story h1 {
font-size: 46px;
}
amp-story h2 {
font-size: 36px;
}
amp-story p {
font-size: 16px;
line-height: 24px;
}
.bold {
font-weight: bold;
}
.bottom {
align-content: end;
}
.medium {
font-weight: 600;
}
.first {
padding-top: 65px;
}
.last {
padding-bottom: 65px;
}
.blue {
color: #4285F4;
}
.twenty-px {
font-size: 20px;
}
.center {
text-align: center;
}
.lh30 {
line-height: 30px;
}
.icon {
background-image: url(https://ampbyexample.com/img/AMP-Brand-White-Icon.svg);
background-repeat: no-repeat;
background-size: 50px 50px;
height: 50px;
object-fit: contain;
width: 50px;
}
.byline {
letter-spacing: 1.28px;
padding-bottom: 58px;
}
.introducing * {
line-height: 42px;
}
.subtitle-page {
padding-top: 80px;
}
.button {
align-items: center;
border: 4px solid #FFFFFF;
color: #FFFFFF;
display: flex;
height: 60px;
margin: 0 auto;
max-width: 240px;
text-decoration:none;
}
.button p {
font-size: 20px;
width: 100%;
}
amp-ad[template="image-template"] img,amp-ad[template="video-template"] {
object-fit: cover;
}
::cue {
background-color: rgba(0,0.75);
font-size: 24px;
line-height: 1.5;
}
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<script async custom-element="amp-story-auto-ads" src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
<body>
<amp-story standalone
title="Key Highlights of AMP Conf 2018"
publisher="The AMP team"
publisher-logo-src="https://ampbyexample.com/img/AMP-Brand-White-Icon.svg"
poster-portrait-src="https://ampbyexample.com/img/overview.jpg">
<!-- <amp-story-auto-ads>
<script type="application/json">
{
"ad-attributes": {
"type": "doubleclick","data-slot": "/30497360/a4a/amp_story_dfp_example"
}
}
</script>
</amp-story-auto-ads>
-->
<amp-story-page id="page-1">
<amp-story-grid-layer template="fill">
<amp-video autoplay loop
width="400"
height="750"
poster="https://ampbyexample.com/img/poster0.png"
layout="fill">
<source src="https://ampbyexample.com/video/p1.mp4" type="video/mp4">
</amp-video>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-2">
<amp-story-grid-layer template="fill">
<amp-img width="400" height="750" layout="fill" src="https://ampbyexample.com/img/overview.jpg"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" class="bottom">
<h2 class="bold">Overview</h2>
<p>We held the second AMP Conf to celebrate the breadth of the AMP
community and announce the latest AMP innovations. We engaged 400+
devs in-person over two days and thousands globally on live stream.</p>
<p class="last">Here are the key launches by the AMP team and others this year</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-3">
<amp-story-grid-layer template="fill">
<amp-video autoplay loop
width="400"
height="750"
poster="https://ampbyexample.com/img/poster.jpg"
layout="fill">
<source src="https://ampbyexample.com/video/stamp-animation.mp4" type="video/mp4">
</amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" class="bottom">
<div class="introducing">
<p class="bold blue twenty-px center">Introducing</p>
<h2 class="bold blue center last">AMP Stories</h2>
</div>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-4">
<amp-story-grid-layer template="fill">
<amp-img width="400" height="750" layout="fill" src="https://ampbyexample.com/img/blue-stuff.jpg"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" class="bottom">
<h1 class="bold">A visual storytelling format fot the open web</h1>
<p class="last">Providing content publishers with a mobile-focused
format for delivering news and information as visual,tap-through
stories on the open web.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-5" auto-advance-after="stamp-vid">
<amp-story-grid-layer template="fill">
<amp-video autoplay
id="stamp-vid"
width="400"
height="750"
poster="https://ampbyexample.com/img/poster2.jpg"
layout="fill">
<source src="https://ampbyexample.com/video/stamp.mp4" type="video/mp4">
<track default src="https://ampbyexample.com/video/stamp.vtt" srclang="en">
</amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<div grid-area="lower-third" class="subtitle-page">
<p class="bold twenty-px center">
Telling stories with AMP.
</p>
</div>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-6">
<amp-story-grid-layer template="fill">
<amp-video autoplay loop
width="400"
height="750"
poster="https://ampbyexample.com/img/poster3.jpg"
layout="fill">
<source src="https://ampbyexample.com/video/gmail-animation.mp4" type="video/mp4">
</amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<div class="introducing">
<p class="bold twenty-px center first">Introducing</p>
<h2 class="bold center">AMP For Email</h2>
</div>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-7">
<amp-story-grid-layer template="fill">
<amp-img width="400" height="750" layout="fill" src="https://ampbyexample.com/img/blue-gmail.jpg"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" class="bottom">
<h1 class="bold">Bringing the power of AMP to Gmail</h1>
<p class="last">New spec allows developers to create more engaging,interactive,and actionable email experiences with AMP content.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-8" auto-advance-after="gmail-vid">
<amp-story-grid-layer template="fill">
<amp-video autoplay
id="gmail-vid"
width="400"
height="750"
poster="https://ampbyexample.com/img/poster4.jpg"
layout="fill">
<source src="https://ampbyexample.com/video/gmail.mp4" type="video/mp4">
<track default src="https://ampbyexample.com/video/gmail.vtt" srclang="en">
</amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<div grid-area="lower-third" class="subtitle-page">
<p class="bold twenty-px center lh30">
AMP for Email: <br/> A New Frontier for AMP
</p>
</div>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-9">
<amp-story-grid-layer template="fill">
<amp-img width="400" height="750" layout="fill" src="https://ampbyexample.com/img/green-phone.jpg"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" class="bottom">
<div class="introducing">
<p class="bold twenty-px center">discover</p>
<h2 class="bold center last">AMP for <br/> E-Commerce</h2>
</div>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-10">
<amp-story-grid-layer template="fill">
<amp-img width="400" height="750" layout="fill" src="https://ampbyexample.com/img/green-stuff.jpg"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" class="bottom">
<h1 class="bold">Improve conversions with fast,user-friendly experiences</h1>
<p class="last">With instant page load,your customers can find the products they want quickly and easily.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-11" auto-advance-after="ecomm-vid">
<amp-story-grid-layer template="fill">
<amp-video autoplay
id="ecomm-vid"
width="400"
height="750"
poster="https://ampbyexample.com/img/poster5.jpg"
layout="fill">
<source src="https://ampbyexample.com/video/ecommerce.mp4" type="video/mp4">
<track default src="https://ampbyexample.com/video/ecommerce.vtt" srclang="en">
</amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<div grid-area="lower-third" class="subtitle-page">
<p class="bold twenty-px center lh30">
Building an AMP e-commerce Experience
</p>
</div>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-12">
<amp-story-grid-layer template="fill">
<amp-img width="400" height="750" layout="fill" src="https://ampbyexample.com/img/roadshow.jpg"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds" class="bottom">
<h1 grid-area="middle-third" class="bold">Join the worldwide AMP Roadshow</h1>
</amp-story-grid-layer>
<amp-story-cta-layer>
<a href="https://www.ampproject.org" class="button medium center">
<p class="20px">Sign up Now</p>
</a>
</amp-story-cta-layer>
</amp-story-page>
<!-- <amp-story-bookend src="https://ampbyexample.com/json/bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story> -->
</body>解决方法
嗯，我真的想出了答案。基本上你在javascript中寻找Event.Listener。然后你添加一个函数（如果这不是一个函数，请告诉我）下面是 javascript 代码的前后。
之前
this.element.addEventListener('ampstory:nonextpage',function () {
Kk(a);
});
之后
this.element.addEventListener('ampstory:nonextpage',function () {
Kk(a);
});