Я установил способ для моей семьи загружать и отображать фотографии, но я столкнулся с проблемой. Я пытался превратить это в слайд-шоу. Я пробовал разные методы, но не нашел решения. Это мой html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/display.js"></script>
<script src="js/slideshow.js"></script>
<title>Test Images</title>
</head>
<body>
<div id="slideshow">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</body>
</html>
Это мой метод помещения изображений в html:
var folder = "uploads/";
var img = "<img src='";
var imgStyle = "style='width:100%'";
var imgClass = "class='mySlides fade'";
$.ajax({
url : folder,
success : function (data) {
$(data).find("a").attr("href", function (i, val){
if( val.match(/\.(jpe?g|png|gif)$/) ) {
$( "#slideshow" ).append( img + folder + val + "'" + imgStyle + ">");
}
});
}
});
И это мой текущий метод слайд-шоу:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Я получаю эту ошибку:
Uncaught ReferenceError: plusSlides is not defined
at HTMLAnchorElement.onclick
Я понятия не имею, как решить эту проблему.