Проблема со слайд-шоу в Javascript, изображения не загружаются
У меня проблема с ползунком, который я должен сделать для школы. Консоль не возвращает ошибок, но изображения не отображаются в ползунке. Я на нем уже четвертый день и не могу понять в чем проблема, так что похоже мне нужны ваши фары! ^^
Я использовал консоль, чтобы проверить, работает ли «diaporama.js», и это так, console.info в конце «slider.js» должен проверить, в порядке ли мой путь к изображению, и это так. Я совершенно не понимаю, что происходит не так.
Заранее спасибо !
Вот мой код:
HTML
<!DOCTYPE html>
<html lang = "fr">
<head>
<meta charset = "utf-8">
<meta property = "og:url" content = "" />
<title>Slider</title>
<link rel = "stylesheet" href = "slide.css">
</head>
<body>
<h1>Test</h1>
<div id = "caroussel">
<img src = "" alt = "diapo1" id = "diapo">
<div id = "precedent" ><</div>
<div id = "suivant" >></div>
</div>
<script src = "diaporama.js"></script>
<script src = "slide.js"></script>
</body>
</html>
Диапорама.js
class Diaporama {
constructor(src, images) {
this.src = src;
this.images = images;
this.position = 0;
this.start();
}
slideLeft() {
if (this.position <= 0) {
this.position = this.images.length - 1;
} else {
this.position--;
}
this.src = this.images[this.position];
}
slideRight() {
if (this.position > this.length-1) {
this.position = 0;
}
else {
this.position++;
}
this.src = this.images[this.position];
}
start() {
this.src = this.images[this.position];
}
}
слайд.js
var images = Array('img/caroussel1.png', 'img/caroussel2.jpg', 'img/caroussel3.jpg', 'img/caroussel4.jpg', 'img/caroussel5.jpg');
var src = document.getElementById("diapo").src;
var diaporama = new Diaporama(src, images);
setInterval(function () { diaporama.slideLeft(); }, 5000);
console.info(src);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как минимум, похоже, что одна проблема заключается в следующем:
- У вас есть элемент изображения с идентификатором
diapoв вашем HTML, а затем в DOM, который имеет пустой атрибутsrc. - В
slide.jsвы пытаетесь создать новый экземпляр классаDiaporamaс именемdiaporama, используя пустой атрибутsrc, который вы сохранили в переменнойsrcвslide.js. - Поскольку элементу
imgтребуется атрибутsrcс фактическим URL-адресом, для отображения изображения по этому URL-адресу вы ничего не видите, поскольку не указали URL-адрес (вы также не получите ошибку, так как пустой атрибутsrcявляется абсолютно допустимым HTML и не вызывает ошибок JS)
ОБНОВЛЕНИЕ В ОТВЕТ НА КОММЕНТАРИИ
Критическая проблема (или недосмотр) заключается в том, что у вас есть:
- элемент карусели в файле index.html, который затем представлен в DOM (что мы и ожидаем)
- экземпляр класса
Diaporamaс именемdiaporamaвslide.js, который не имеет ссылки на карусель DOM, которую вы хотите иметь: все, что есть уdiaporama, — этоString, взятый из атрибутаsrcкарусели DOM, который ссылается на URL-путь различных изображений. Экземплярdiaporamaникогда не сможет «достучаться» и обновить карусель DOM, учитывая написанный вами код.
К счастью, исправить это очень просто.
Как вы знаете, должна быть связь между DOM и созданным вами объектом; создание такой ссылки является прямым и включает только запросы DOM.
Я добавил решение (я поместил ВСЕ JS в один файл, а не в два файла, как у вас, но это не важно)
class Diaporama {
constructor(imgElem, images) {
this.imgElem = imgElem;
this.images = images;
this.position = 0;
this.start();
}
slideLeft() {
if (this.position <= 0) {
this.position = this.images.length - 1;
} else {
this.position--;
}
// this is part of the 'bridge' between "carousel.js" and the DOM
this.imgElem.src = this.images[this.position];
}
slideRight() {
// there was an error in your original "slideRight" method: a typo and an "off-by-error"
if (this.position >= this.images.length-1) {
this.position = 0;
}
else {
this.position++;
}
// this is part of the 'bridge' between "carousel.js" and the DOM
this.imgElem.src = this.images[this.position];
}
start() {
// this is part of the 'bridge' between "carousel.js" and the DOM
this.imgElem.src = this.images[this.position];
}
}
// prefer an Array literal rather than call to Array -- less verbose, and slightly faster
var images = ['img/one.jpg', 'img/two.jpg', 'img/three.jpg'];
// This is where 'bridge' between "carousel.js" and the DOM is created: we 'cache' a reference to the carousel 'img' element,
// which we will then modify from within the 'carousel' instance of class Diaporama
var imgElem = window.document.getElementById('carousel').querySelector('img');
var carousel = new Diaporama(imgElem, images);
carousel.start();
// create 'delegated' event listener on document, and trigger correct method of 'carousel' in response to user interaction
window.document.addEventListener('click', ev => {
const target = ev.target;
if (target.id === 'back_button') {
carousel.slideLeft();
} else if (target.id === 'next_button') {
carousel.slideRight();
}
});.carousel {
max-height: 400px;
max-width: 600px;
background: rgb(250,250,200);
overflow: hidden;
}
.button-wrapper {
display: flex;
justify-content: space-around;
}<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Carousel</title>
</head>
<body>
<h1>Carousel slider (OOP)</h1>
<section id = "carousel" class = "carousel">
<div class = "button-wrapper">
<button id = "back_button">Back</button>
<button id = "next_button">Next</button>
</div>
<img src = "" alt = "carousel image">
</section>
<script src = "carousel.js"></script>
</body>
</html>Я надеюсь, что это поможет ответить на ваш вопрос!
Если это так, пожалуйста, отметьте мой ответ как принятый.
Если у вас остались вопросы, дайте мне знать, и я постараюсь на них ответить.
О вашем первом сообщении: я пытался заполнить пустой src, но проблема в том, что появилось только изображение с выбранным src, а остальные, хранящиеся в массиве, - нет. Я только начинаю с JS, я хотел сделать слайдер на базовом JS (который работал хорошо), и теперь моя задача преобразовать его в ООП. Так что я, конечно, сделал много ошибок, поэтому я прошу о помощи! :) Что мне делать, чтобы решить проблему с зачатием?
Круто, спасибо за разъяснение: я могу попытаться вернуться к вам в течение следующего дня или двух, с обзором того, как подойти к этой проблеме.
Было бы очень любезно, большое спасибо!
@Panoo Я обновил свой первоначальный ответ решением вашей проблемы - дайте мне знать, если он ответил на ваш вопрос, спасибо!
Большое спасибо за все объяснения и решение, это решило проблему! Я так счастлив. Еще раз большое спасибо!
PS. У вас большие проблемы с общей концепцией этого класса и карусели (во всяком случае, судя по тому, как я читал ваш код): например, где вы обновляете DOM и т. д.?