Я пытался сделать слайд-шоу с HTML и JavaScript, но это не работает, и я не получаю ошибки. У меня есть 2 сценария ... один, чтобы поместить изображения в html, а другой, чтобы сделать его слайд-шоу. Это JavaScript, чтобы показать показать изображения:
var folder = "uploads/";
var img = "<img src='";
var imgStyle = "style='width:100%'";
var imgClass = "class='slide'";
$.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 + "'" + imgClass + imgStyle + ">");
}
});
}
});
Выше работает нормально, но проблема в слайд-шоу. Без файла слайд-шоу. js отображаются изображения, но как только я запускаю слайд-шоу javascript, все становится невидимым. Вот код из слайд-шоу. js file:
var slides = document.querySelectorAll('#slideshow .slide'),
currentSlide = 0,
firstBtn = document.getElementById('one'),
secondBtn = document.getElementById('two'),
thirdBtn = document.getElementById('three');
function getAllSiblings(elem, filter) {
var sibs = [];
elem = elem.parentNode.firstChild;
do {
if (elem.nodeType === 3) continue; // text node
if (!filter || filter(elem)) sibs.push(elem);
} while (elem = elem.nextSibling)
return sibs;
}
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].className = 'slide active';
};
firstBtn.onclick = function() {
var slide = getAllSiblings(slides[0]);
slide.forEach(function(el) {
el.classList.remove('active');
});
slides[0].className = 'slide active';
var result = getAllSiblings(this);
result.forEach(function(el) {
el.classList.remove('active');
})
this.classList.add('active');
};
secondBtn.onclick = function() {
var slide = getAllSiblings(slides[1]);
slide.forEach(function(el) {
el.classList.remove('active');
});
slides[1].className = 'slide active';
var result = getAllSiblings(this);
result.forEach(function(el) {
el.classList.remove('active');
})
this.classList.add('active');
};
thirdBtn.onclick = function() {
var slide = getAllSiblings(slides[2]);
slide.forEach(function(el) {
el.classList.remove('active');
});
slides[2].className = 'slide active';
var result = getAllSiblings(this);
result.forEach(function(el) {
el.classList.remove('active');
})
this.classList.add('active');
};
<!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 defer src="js/slideshow.js"></script>
<title>Test Images</title>
</head>
<body>
<div id="slideshow">
</div>
<div class="controllers">
<span id='one' class='active'></span>
<span id='two'></span>
<span id='three'></span>
</div>
</body>
</html>
Вот кодовое перо для дисплея: https://codepen.io/ksaeidnia0/pen/BaozNzP
Вот кодовое перо для слайд-шоу : https://codepen.io/ksaeidnia0/pen/ZEbOGWz