1 回答

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超10個(gè)贊
至少,看起來(lái)有一個(gè)問(wèn)題是:
您的 HTML 中有一個(gè)帶有 ID 的圖像元素
diapo
,然后在 DOM 中,它有一個(gè)空src
屬性。在中,您嘗試使用存儲(chǔ)在變量中的空屬性來(lái)創(chuàng)建名為
slide.js
的類(lèi)的新實(shí)例。Diaporama
diaporama
src
src
slide.js
由于
img
元素需要具有src
實(shí)際 URL 的屬性,為了在該 URL 處顯示圖像,您什么也看不到,因?yàn)?strong>您沒(méi)有提供 URL(您也不會(huì)收到錯(cuò)誤,因?yàn)榭?code>src屬性是完全有效的) HTML,并且不會(huì)導(dǎo)致 JS 錯(cuò)誤)
針對(duì)評(píng)論的更新
關(guān)鍵問(wèn)題(或疏忽)是您:
index.html 文件中的輪播元素,然后在 DOM 中表示(這正是我們所期望的)
Diaporama
一個(gè)名為diaporama
in的類(lèi)的實(shí)例slide.js
,它沒(méi)有指向您希望它具有的DOM 輪播的鏈接diaporama
:所有內(nèi)容都是 a?String
,取自src
DOM 輪播的屬性,它引用各種圖像的 URL 路徑。根據(jù)您編寫(xiě)的代碼,實(shí)例diaporama
永遠(yuǎn)無(wú)法“伸出援手”并更新 DOM 輪播。
值得慶幸的是,修復(fù)非常簡(jiǎn)單。
如您所知,DOM 和您創(chuàng)建的對(duì)象之間需要存在鏈接;創(chuàng)建這樣的鏈接非常簡(jiǎn)單,只涉及 DOM 查詢。
我添加了一個(gè)解決方案(我已將所有 JS 放在一個(gè)文件中,而不是像您那樣放在兩個(gè)文件中 - 但這并不重要)
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>
<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>
我希望這有助于回答您的問(wèn)題!
添加回答
舉報(bào)