大佬教程收集整理的这篇文章主要介绍了如何让幻灯片轮播上的最后一张图片自动将访问者带到另一个网页？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
您好，我的网站上有一张图片幻灯片，我希望将其设置为显示最后一张图片时自动将访问者带到注册页面的位置。我需要做什么才能进行设置？
我使用了一个幻灯片模板，这是我在 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);
});
以上是大佬教程为你收集整理的如何让幻灯片轮播上的最后一张图片自动将访问者带到另一个网页？全部内容，希望文章能够帮你解决如何让幻灯片轮播上的最后一张图片自动将访问者带到另一个网页？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。