setInterval() funktioniert nicht mit src verknüpften Bildern in HTML

Question

New Coder - 1. Frage hier. Ich mache erste freie Code-Camp-Projekt, aber die Frage ist über eine nicht benötigte flourish ich will nur hinzufügen und lernen über, es ist nicht für das Projekt benötigt. Ich möchte, dass die Albumcover, die ich in HTML verlinkt habe, alle x Sekunden wechseln. Aber es passiert noch nichts. Bilder bleiben einfach statisch. Dank

<h2> Discography </h2> 
<div class="row"> 
    <div id="album" class="col-lg-8"> 
    <div class="albums" id="album 0"> <span><img src="https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg" alt="1994" class="img-responsive"></span></div> 
    <div class="albums" id="album 1"> <span><img src="https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg" alt="1995" class="img-responsive"></span></div> 
    <div class="albums" id="album 2"> <span><img src="https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg" alt="1997" class="img-responsive"></span></div> 
    <div class="albums" id="album 3"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg" alt="1998" class="img-responsive"></span></div> 
    <div class="albums" id="album 4"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg" alt="2000" class="img-responsive"></span></div> 
    <div class="albums" id="album 5"> <span><img src="https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" alt="2004" class="img-responsive"></span></div> 
    <div class="albums" id="album 6"> <span><img src="https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg" alt="2007" class="img-responsive"></span></div> 
    </div> 

und die Javascript-Code

//Change album cover after 5 seconds - continous loop// 
var Discography = document.getElementById("album"); 
var disc = ["album 0", "album 1", "album 2", "album 3", "album 4", "album 5", "album 6"]; 
var counter = 0; 

function changeDisc() { 
    if (counter >= disc.length) { 
    counter = 0; 
    } 
    Discography.setAttribute =disc[counter]; 
    counter++; 

} 

var myCounter = setInterval(changeDisc, 6000); 

Discography.onClick = function() { 

    clearInterval(Disography); 

    Discography.innerHTML = "Counter stopped"; 

}; 

Answer 1

Sie sind eigentlich nicht das Attribut festlegen. Sie entfernen tatsächlich die setAttribute-Methode und ersetzen sie durch die URL. Ich glaube du willst das:

function changeDisc() { 
    if (counter >= disc.length) { 
    counter = 0; 
    } 
    Discography.setAttribute('src', disc[counter]); 
    counter++; 

} 

Answer 2

Ich habe es geschafft, dass dein Code funktioniert. Ich weiß nicht, ob es das ist, was du wolltest, aber ich hoffe, es hat dir geholfen.

Attribute belegen

Discography.setAttribute = disc[counter]; 

sein sollte

Discography.setAttribute("src", discs[counter]); 

Bind Eventhandler

Discography.onClick = function() { 

Sollte

Discography.addEventListener("click", function() { 

Wrong Element

Sie werden versucht, das src Attribut auf den <div id="album" class="col-lg-8"> zuzuordnen, die eine div ist und es nicht über das Attribut.

Um dies zu beheben, habe ich alle möglichen Albumbilder zu einem Array hinzugefügt und dies wird einem einzigen <img /> zugeordnet, um das zu erhalten.

Beachten Sie, dass ich einige Namenskonventionen geändert habe, die ich bevorzuge.

Meine Lösung

var discs = [ 
 
     "https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg", 
 
     "https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg", 
 
     "https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg", 
 
     "https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg", 
 
     "https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg", 
 
     "https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" , 
 
     "https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg", 
 
]; 
 

 
var counter = 0; 
 
var discography = document.getElementById("album"); 
 

 
function moveToNextDisc() { 
 
    if (counter >= discs.length) { 
 
     counter = 0; 
 
    } 
 

 
    discography.setAttribute("src", discs[counter]); 
 
    counter++; 
 
} 
 

 
var interval = setInterval(moveToNextDisc, 1000); 
 

 
discography.addEventListener("click", function() { 
 
    clearInterval(interval); 
 
    discography.innerHTML = "Counter stopped"; 
 
});

<h2>Discography</h2> 
 

 
<div class="row"> 
 
    <div class="col-lg-8"> 
 
     <div class="albums"> 
 
      <span> 
 
       <img id="album" alt="1994" class="img-responsive"> 
 
      </span> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

für einen bestimmten Zweck zu lernen, die Sie entwickeln eine Komponente, die:

1. jeder Änderung Spurwechsel
2. Anschläge bedecken, wenn die Benutzer pausiert

Javascript sollte für Business-Logik und HTML/CSS als Ansicht Reflexion des Staates der Komponente verwendet werden.

Also brauchen wir für eine Object, die mindestens three methods hat:

• public play startet den Spieler
• public pause dem Spieler

und für eine

private _loop iteriert durch die Tracks Pausen Controller, die die html view steuert.

function Player(element, interval) { 
 
    this.element = element; 
 
    this.tracks = element.querySelectorAll('.albums'); 
 
    
 
    this.currentTrack = null; 
 
    this.isPlaying = false; 
 
    this._timeout = null; 
 
    this.interval = Number(interval) || 2000; 
 
} 
 

 
Player.prototype.pause = function() { 
 
    window.clearTimeout(this._timeout); 
 
    this.isPlaying = false; 
 
    
 
    return this; 
 
}; 
 

 
Player.prototype.play = function() { 
 
    this.isPlaying = true; 
 
    
 
    return this._loop(); 
 
}; 
 

 
Player.prototype._loop = function() { 
 
    var self = this; 
 
    
 
    self._timeout = window.setTimeout(function() { 
 
    var track; 
 
    if(self.currentTrack) { 
 
     track = self.currentTrack.nextElementSibling; 
 
     self.currentTrack.style.opacity = 0; 
 
    } 
 
    
 
    if(!track) { 
 
     track = self.tracks[0]; 
 
    } 
 
    
 
    track.style.opacity = 1; 
 
    self.currentTrack = track; 
 
    
 
    return self._loop(); 
 
    }, self.interval); 
 
    
 
    return this; 
 
} 
 

 
/** VIEW CTRL **/ 
 
function PlayerCtrl() { 
 
    var element = document.querySelector('#album'); 
 
    var player = new Player(element, 3000); 
 
    
 
    var play = document.querySelector('#Play'); 
 
    var pause = document.querySelector('#Pause'); 
 

 
    play.onclick = function() { 
 
    return player.isPlaying || player.play(); 
 
    }; 
 
    pause.onclick = function() { 
 
    return player.isPlaying && player.pause(); 
 
    }; 
 
    
 
    player.play(); 
 
} 
 
document.addEventListener('DOMContentLoaded', PlayerCtrl);

#album { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 10px auto; 
 
    overflow: hidden; 
 
    background: lightcoral; 
 
    position: relative; 
 
    border: 3px dotted #333; 
 
} 
 

 
.albums { 
 
    transition: 450ms opacity linear; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.albums img { max-width: 100%; }

<button id="Play">Play</button> 
 
<button id="Pause">Pause</button> 
 

 
<hr /> 
 

 
<h2> Discography </h2> 
 
<div class="row"> 
 
    <div id="album" class="col-lg-8"> 
 
    <div class="albums" id="album 0"> <span><img src="https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg" alt="1994" class="img-responsive"></span></div> 
 
    <div class="albums" id="album 1"> <span><img src="https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg" alt="1995" class="img-responsive"></span></div> 
 
    <div class="albums" id="album 2"> <span><img src="https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg" alt="1997" class="img-responsive"></span></div> 
 
    <div class="albums" id="album 3"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg" alt="1998" class="img-responsive"></span></div> 
 
    <div class="albums" id="album 4"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg" alt="2000" class="img-responsive"></span></div> 
 
    <div class="albums" id="album 5"> <span><img src="https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" alt="2004" class="img-responsive"></span></div> 
 
    <div class="albums" id="album 6"> <span><img src="https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg" alt="2007" class="img-responsive"></span></div> 
 
    </div>