我正在尝试使用下面的代码制作幻灯片。它应该是div上方的年份列表，其中h4和p浮动在左侧，图片浮动在右侧。我不断收到错误：未捕获的ReferenceError：currentYearSlide没有定义，但我不知道为什么要这样。我可能忽略了一些非常简单的内容。
当用户单击年份或使用箭头移至下一张幻灯片时，所有这些都应与幻灯片上的信息正确匹配。
我还想要两组箭头，一组按年份，一组按图片执行相同的操作，但这应该很容易，因为它应该是相同的JavaScript代码。
var yearSlideIndex = 1;
showYearSlides(yearSlideIndex);
window.plusYearSlides = function (n) {
showYearSlides(yearSlideIndex += n);
};
window.currentYearSlide = function (n) {
showYearSlides(yearSlideIndex = n);
};
function showYearSlides(n) {
var i;
var yearSlides = document.getElementsByClassName("myYearSlides");
var yearDots = document.getElementsByIDName("dotYear");
if (n > yearSlides.length) {yearSlideIndex = 1;}
if (n < 1) {yearSlideIndex = yearSlides.length;}
for (i = 0; i < yearSlides.length; i++) {
yearSlides[i].style.display = "none";
}
for (i = 0; i < yearDots.length; i++) {
yearDots[i].className = yearDots[i].className.replace(" active", "");
}
yearSlides[yearSlideIndex-1].style.display = "block";
yearDots[yearSlideIndex-1].className += " active";
}* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
.myYearSlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 130em;
position: relative;
margin: auto;
width: 100%;
&.year {
position: relative;
max-width: none;
}
img {
@include curvededges();
width: 130em;
object-fit: cover;
margin-top: 0.5em;
max-height: 79em;
margin: 0em;
@include respond($massive-width, $half-four-k){
max-height: 58.5em;
}
@include respond($laptop, $massive-width){
max-height: 56.5em;
}
@include respond($desktop, $laptop) {
max-height: 42em;
}
@include respond($tablet, $desktop) {
max-height: 29.5em;
}
@include respond($tablet) {
max-height: 21.75em;
}
@include respond($large-mobile) {
max-height: 15.5em;
}
@include respond($mobile) {
max-height: 13.75em;
}
@include respond($small-mobile) {
max-height: 11.25em;
}
}
}
.mySlides {
margin-top: 0.35em;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.open_arrow {
cursor: pointer;
color: $white;
border-radius: 50%;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev, .next {
display: none;
&.year{
display: inline;
}
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
display: none;
}
.year_nav {
text-align:center;
margin-top: 2em;
}
/* Caption text */
.text {
font-family: 'Poppins', sans-serif;
color: $white;
font-weight: 600;
font-size: 8em;
padding: 0.5em;
position: absolute;
bottom: 1em;
width: 100%;
text-align: left;
&.year {
font-weight: 300;
font-size: 1em;
padding: 1.5em 0.5em;
position: relative;
width: 50%;
text-align: left;
}
@include respond($laptop, $massive-width){
font-size: 4em;
}
@include respond($laptop){
font-size: 3em;
}
@include respond($tablet){
font-size: 2em;
}
@include respond($mobile-nav){
font-size: 1.25em;
}
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
display: none;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 3em;
width: 3em;
margin: 0 1em;
background-color: transparent;
border: solid $white 2px;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
&.year {
border: none;
margin: 0em 1.75em;
font-size: 1.5em;
span {
opacity: 0.5;
font-family: 'Poppins', sans-serif;
}
}
@include respond ($laptop) {
height: 1.5em;
width: 1.5em;
margin: 0em 0.5em;
}
@include respond ($tablet) {
height: 1em;
width: 1em;
margin: 0em;
}
}
.active, .dot:hover {
background-color: $white;
&.year{
background-color: transparent;
span {
opacity: 1;
}
}
}
.dot_box {
position: absolute;
top: 82em;
left: 52em;
text-align: center;
@include respond($massive-width, $half-four-k){
top: 63.5em;
left: 32em;
}
@include respond($laptop, $massive-width) {
top: 62.5em;
left: 32em;
}
@include respond($desktop, $laptop) {
top: 47em;
left: 26.5em;
}
@include respond($tablet, $desktop) {
top: 36em;
left: 16.5em;
}
@include respond($tablet) {
top: 29em;
left: 14.5em;
}
@include respond($large-mobile) {
top: 20em;
left: 9.5em;
}
@include respond($mobile) {
top: 18.5em;
left: 8em;
}
@include respond($small-mobile) {
top: 16em;
left: 6em;
}
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
.year_nav{
background-color: transparent;
color: $white;
font-weight: 600;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
}<section class="main__section pink">
<div class="content__centre pink">
<div class="slideshow-container">
<!-- The dots/circles -->
<div class="year_nav">
<a class="prev year" onclick="plusYearSlides(-1)">❮</a>
<span id="dotYear" class="dot year" onclick="currentYearSlide(1)">1990</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(2)">1993</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(3)">1995</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(4)">1998</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(5)">2001</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(6)">2002</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(7)">2003</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(8)">2005</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(9)">2006</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(10)">2008</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(11)">2010</span>
<span id="dotYear" class="dot year" onclick="currentYearSlide(12)">2012</span>
<a class="next year" onclick="plusYearSlides(1)">❯</a>
</div>
<!-- Full-width images with number and caption text -->
<div class="myYearSlides fade">
<div class="numbertext">1 / 12</div>
<h4>1990</h4>
<div class="text year">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">2 / 12</div>
<h4>1993</h4>
<div class="text year">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">3 / 12</div>
<h4>1995</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">4 / 12</div>
<h4>1998</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">5 / 12</div>
<h4>2001</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">6 / 12</div>
<h4>2002</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">7 / 12</div>
<h4>2003</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">8 / 12</div>
<h4>2005</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">9 / 12</div>
<h4>2006</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">10 / 12</div>
<h4>2008</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">11 / 12</div>
<h4>2010</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="myYearSlides fade">
<div class="numbertext">12 / 12</div>
<h4>2012</h4>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</div>