Javascript 中的幻灯片显示问题，图片无法加载

Question

我在学校必须做的滑块有问题。控制台 return 没有错误，但图像不显示在滑块中。我已经用了四天了，我不知道是什么问题，所以看来我需要你的灯！ ^^

我使用控制台检查“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];
    }

}

slide.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 中，您尝试使用 空 [=14] 创建 class Diaporama 的新实例，名为 diaporama =]属性，你已经存储在变量src in slide.js.
由于 img 元素需要具有实际 URL 的 src 属性，以便在 URL 处显示图像，您什么也看不到，因为您没有提供 URL（您也不会收到错误，因为空的 src 属性完全有效 HTML，并且会导致没有 JS 错误）

更新以回应评论

关键问题（或疏忽）是您：

index.html 文件中的轮播元素，然后在 DOM 中表示（这是我们所期望的）
class Diaporama 的一个实例在 slide.js 中调用了 diaporama，其中 没有 link 到 DOM carousel，你希望它有：所有 diaporama 有一个 String，取自 DOM carousel 的 src 属性，它指的是URL 各种图像的路径。考虑到您编写的代码，diaporama 实例永远无法“伸出手”并更新 DOM 轮播。

谢天谢地，修复非常简单。

如您所知，DOM和您创建的对象之间需要有link；创建这样的 link 非常简单，只涉及 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 中的幻灯片显示问题，图片无法加载

Problem with slideshow in Javascript, images don't load

javascript

oop

slideshow

更新以回应评论