[RUBY] So wechseln Sie Miniaturbilder mit JavaScript

So wechseln Sie Miniaturbilder mit JavaScript

Bild ↓

Ich habe die Bildersetzung mit JavaScript implementiert!

• Bitte beachten Sie, dass dies nur ein Memorandum ist.

Verfahren

1. Erstellen Sie eine HTML-Datei und fügen Sie das Bild des Bildes ein
2. Codierung mit CSS
3. Schreiben Sie die Methode, wenn Sie mit JavaScript auf das Bild klicken

Es ist zu rau, haha. Ich werde es tatsächlich schreiben und erklären.

Schreiben Sie HTML

<div class="center">
  <div>
  　<img src="img1.jpg " id="bigimg">
  </div>
  <ul>
    <li><img src="thumb-img1.jpg " class="thumb" data-image="img1.jpg "></li>
    <li><img src="thumb-img2.jpg " class="thumb" data-image="img2.jpg "></li>
    <li><img src="thumb-img3.jpg " class="thumb" data-image="img3.jpg "></li>
    <li><img src="thumb-img4.jpg " class="thumb" data-image="img4.jpg "></li>
  </ul>
 </div>

Legen Sie das übergeordnete Element und das img-Tag fest, das id = "bigimg" direkt darunter enthält. Dies muss später mit getElementById abgerufen werden. Fügen Sie daher ein Attribut hinzu. Erstellen Sie ein ul-Tag und speichern Sie das Bild, das Sie anzeigen möchten, in der Miniaturansicht im Listen-Tag. Hier kommt das Attribut "Datenbild" ins Spiel.

Was ist das Datenbildattribut?

Obwohl es sich um dieses Attribut handelt, existiert das Datenbildattribut nicht und es ist das Attribut "Daten". (Auch als benutzerdefiniertes Datenattribut bekannt) Einfach ausgedrückt sieht es so aus, diesmal habe ich es Bild genannt, aber im Grunde ist alles in Ordnung.

Gründe für die Verwendung des data- * -Attributs

Es wird verwendet, um Daten in HTML-Tags einzubetten und ihre Werte aus Javascript zu lesen oder neu zu schreiben. Ich werde dieses Datenbildattribut später mit einer JavaScript-Methode aufrufen, also werde ich es aufschreiben.

Codierung mit CSS

Ich dachte, es wäre in Ordnung, dies separat wegzulassen, aber ich werde es mit CSS codieren, damit es so aussieht.

section img{
  max-width: 100%;
}
.center{
  margin: 0 auto 0 auto;
  max-width: 90%;
  width: 500px;
}
.center ul{
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.center li{
  flex: 1 1 auto;
  margin-right: 8px;
}
li:last-of-type{
  margin-right: 0;
}

Ich werde die Erklärung hier weglassen, aber es sieht wie folgt aus.

Ein Klick auf das Bild hier bringt natürlich nichts. ~~ Die Vögel stehen nur in Klammern ~~

Schreiben Sie JavaScript

Jetzt ist das Hauptthema von hier. Ich werde JavaScript schreiben.

const thumbs = document.querySelectorAll('.thumb');
 //CSS-Selektor'.thub'Und ordne es den konstanten Daumen zu
 console.log(thumbs);  //Stellen Sie sicher, dass der Wert einmal in der Konsole gespeichert ist.

Es ist in Ordnung, wenn die Bilder in einem Array wie diesem gespeichert sind. Ich erhalte die .thumb des CSS-Selektors mit der querySeleAll-Methode.

const thumbs = document.querySelectorAll('.thumb');
  // console.log(thumbs);
thumbs.forEach(function(item,index){
 item.onclick = function(){
  document.geElementById('bigimg').src = this.dataset.image;
 }
});

Es gibt eine Funktion in thubs.forEach und es gibt einen Parameter (item, index) in der Funktion. Das Element ist das zuvor auf der Konsole bestätigte img-Element, und der Index ist die Array-Nummer. Was reduziert wird, ist, dass beim Auslösen des Ereignisses item.click die document.getElementById in der letzten Zeile die 'bigimg'id' abruft und das src-Attribut durch das Datenbildattribut ersetzt, das zuerst in HTML beschrieben wurde. Ersetzt durch das data- * -Attribut in this.dataset.image.

Wenn das Klickereignis ausgelöst wird, wird das Datenbild bei "bigimg" eingegeben und die Miniaturansicht von bigimg geändert.

Erhaltenes Element.Attribut=Wert;

 Diesmal


#### **`document.geElementById('bigimg').src = this.dataset.image;`**

Das ist der Teil.

Es war gegen Ende etwas schwierig zu erklären, aber es sieht so aus. Ich werde den fertigen Quellcode einfügen und fertig stellen!

const thumbs = document.querySelectorAll('.thumb');
  // console.log(thumbs);
  thumbs.forEach(function(item,index){
    item.onclick = function(){
      document.getElementById('bigimg').src = this.dataset.image;
    }
  });

<div class="center">
    <div>
      <img src="img1.jpg " id="bigimg">
    </div>
    <ul>
      <li><img src="thumb-img1.jpg " class="thumb" data-image="img1.jpg "></li>
      <li><img src="thumb-img2.jpg " class="thumb" data-image="img2.jpg "></li>
      <li><img src="thumb-img3.jpg " class="thumb" data-image="img3.jpg "></li>
      <li><img src="thumb-img4.jpg " class="thumb" data-image="img4.jpg "></li>
    </ul>
  </div>

das ist alles! Wenn Sie Bedenken haben, hinterlassen Sie bitte einen Kommentar : kissing_closed_eyes: chu ☆