Javascript 中的幻燈片問題，無法加載圖像

Question

我有一個 slider 的問題，我必須為學校做。 控制台沒有返回錯誤，但圖像未顯示在 slider 中。 我已經用了四天了，我不知道是什么問題，所以我似乎需要你的燈！ ^^

我使用控制台檢查“diaporama.js”是否正常工作，“slider.js”末尾的console.log 用於檢查我的圖像路徑是否正常。 我完全不知道出了什么問題。

先感謝您！

這是我的代碼：

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>

diaporama.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.log(src);

Answer 1

至少，看起來一個問題是：

在 HTML 中有一個 ID diapo的圖像元素，然后在 DOM中有一個空的src屬性。
在slide.js中，您嘗試使用您存儲在slide.js中的變量src中的空src屬性來創建diaporama Diaporama 的新實例，稱為Diaporama 。
Since an img element needs a src attribute with an actual URL, in order to show the image at that URL, you are seeing nothing, since you have not provided a URL (You won't get an error either, since an empty src attribute是完全有效的 HTML，並且不會導致 JS 錯誤）

更新回應評論

關鍵問題（或疏忽）是您有：

index.html 文件中的輪播元素，然后在 DOM 中表示（這是我們所期望的）
class slide.js的實例在Diaporama中稱為diaporama ，它沒有指向您希望它擁有的 DOM 輪播的鏈接：所有diaporama都有一個String ，取自 DOM 輪播的src屬性，它指的是 ZE6B391A8D2C4D45902A23A8B6585703D的各種圖像。 鑒於您編寫的代碼， diaporama實例永遠無法“伸出”並更新 DOM 輪播。

值得慶幸的是，修復非常簡單。

如您所知，您創建的 DOM 和 object 之間需要有鏈接； 創建這樣的鏈接很簡單，只涉及 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>

我希望這有助於回答你的問題！

如果是這樣，那么請將我的答案標記為已接受。

如果您仍有疑問，請告訴我，我會盡力回答。

Javascript 中的幻燈片問題，無法加載圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2020-12-11 16:49:46

更新回應評論

Javascript 中的幻燈片問題，無法加載圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2020-12-11 16:49:46

更新回應評論

解決方案1
0 已采納 2020-12-11 16:49:46