第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Javascript 中的幻燈片出現(xiàn)問(wèn)題,圖像無(wú)法加載

Javascript 中的幻燈片出現(xiàn)問(wèn)題,圖像無(wú)法加載

江戶川亂折騰 2023-11-12 21:54:23
我必須為學(xué)校做的滑塊有問(wèn)題??刂婆_(tái)不返回錯(cuò)誤,但圖像不顯示在滑塊中。我已經(jīng)使用了四天了,但我不知道問(wèn)題出在哪里,看來(lái)我需要你的燈!^^我使用控制臺(tái)檢查“diaporama.js”是否正常工作,“slider.js”末尾的console.log是檢查我的圖像路徑是否正常,并且確實(shí)正常。我完全不知道出了什么問(wèn)題。先感謝您 !這是我的代碼:超文本標(biāo)記語(yǔ)言<!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貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超10個(gè)贊

至少,看起來(lái)有一個(gè)問(wèn)題是:

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

  2. 在中,您嘗試使用存儲(chǔ)在變量中的屬性來(lái)創(chuàng)建名為slide.js的類(lèi)的新實(shí)例。Diaporamadiaporamasrcsrcslide.js

  3. 由于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)題(或疏忽)是您:

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

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


查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 1 回答
  • 0 關(guān)注
  • 158 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)