亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Javascript 中的幻燈片出現問題,圖像無法加載

Javascript 中的幻燈片出現問題,圖像無法加載

江戶川亂折騰 2023-11-12 21:54:23
我必須為學校做的滑塊有問題??刂婆_不返回錯誤,但圖像不顯示在滑塊中。我已經使用了四天了,但我不知道問題出在哪里,看來我需要你的燈!^^我使用控制臺檢查“diaporama.js”是否正常工作,“slider.js”末尾的console.log是檢查我的圖像路徑是否正常,并且確實正常。我完全不知道出了什么問題。先感謝您 !這是我的代碼:超文本標記語言<!DOCTYPE html><html><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>幻燈片.jsclass 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];    }}幻燈片.jsvar 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);
查看完整描述

1 回答

?
慕哥6287543

TA貢獻1831條經驗 獲得超10個贊

至少,看起來有一個問題是:

  1. 您的 HTML 中有一個帶有 ID 的圖像元素diapo,然后在 DOM 中,它有一個空src屬性。

  2. 在中,您嘗試使用存儲在變量中的屬性來創建名為slide.js的類的新實例。Diaporamadiaporamasrcsrcslide.js

  3. 由于img元素需要具有src實際 URL 的屬性,為了在該 URL 處顯示圖像,您什么也看不到,因為您沒有提供 URL(您也不會收到錯誤,因為空src屬性是完全有效的) HTML,并且不會導致 JS 錯誤)


針對評論的更新

關鍵問題(或疏忽)是您:

  1. index.html 文件中的輪播元素,然后在 DOM 中表示(這正是我們所期望的)

  2. Diaporama一個名為diaporamain的類的實例slide.js,它沒有指向您希望它具有的DOM 輪播的鏈接diaporama:所有內容都是 a?String,取自srcDOM 輪播的屬性,它引用各種圖像的 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>

<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>

我希望這有助于回答您的問題!


查看完整回答
反對 回復 2023-11-12
  • 1 回答
  • 0 關注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號