[RUBY] Comment changer d'images miniatures avec JavaScript

Comment changer d'images miniatures à l'aide de JavaScript

Image ↓

J'ai implémenté le remplacement d'image en utilisant JavaScript!

• Veuillez noter qu'il ne s'agit que d'un mémorandum.

Procédure

1. Créez un fichier HTML et collez l'image de l'image
2. Codage avec css
3. Écrivez la méthode en cliquant sur l'image avec JavaScript

C'est trop dur, haha, je vais l'écrire et l'expliquer.

Écrire du 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>

Définissez l'élément parent et définissez la balise img qui contient id = "bigimg" directement en dessous. Cela devra être obtenu plus tard avec getElementById, alors ajoutez un attribut. Créez une balise ul et stockez l'image que vous souhaitez afficher dans la vignette de la balise de liste. C'est là qu'intervient l'attribut data-image.

Quel est l'attribut data-image?

Bien qu'il s'agisse de cet attribut, l'attribut data-image n'existe pas, et c'est l'attribut `data-'anything '. (Également appelé attribut de données personnalisé) Pour faire simple, cela ressemble à ceci, cette fois je l'ai nommé image, mais fondamentalement tout va bien.

Raisons d'utiliser l'attribut data- *

Il est utilisé pour incorporer des données dans des balises HTML et lire ou réécrire ses valeurs à partir de Javascript. J'appellerai cet attribut data-image plus tard avec une méthode JavaScript, donc je l'écrirai.

Codage avec CSS

Je pensais que ce serait bien d'omettre cela séparément, mais je vais le coder avec CSS pour le faire ressembler à ça.

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

Je vais omettre l'explication ici, mais cela ressemble à ce qui suit.

Bien sûr, cliquer sur l'image ici ne fait rien. ~~ Les oiseaux sont juste entre parenthèses ~~

Écrire du JavaScript

Maintenant, le sujet principal est d'ici. J'écrirai du JavaScript.

const thumbs = document.querySelectorAll('.thumb');
 //sélecteur css'.thub'Et assignez-le aux pouces constants
 console.log(thumbs);  //Assurez-vous que la valeur est stockée une fois dans la console.

Ce n'est pas grave si les images sont stockées dans un tableau comme celui-ci. J'obtiens le .thumb du sélecteur css avec la méthode querySeleAll.

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

Il y a une fonction dans thubs.forEach et il y a un paramètre (item, index) dans la fonction. L'élément est l'élément img confirmé sur la console plus tôt, et l'index est le numéro du tableau. Ce qui est réduit, c'est que lorsque l'événement item.click se déclenche, le document.getElementById sur la dernière ligne obtient l'id'bigimg'id et remplace l'attribut src par l'attribut data-image décrit pour la première fois en HTML. Remplacé par l'attribut data- * dans this.dataset.image.

Avec cela, lorsque l'événement de clic se déclenche, l'image de données sera entrée dans "bigimg" et la vignette de bigimg sera modifiée.

Élément obtenu.attribut=valeur;

 Cette fois


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

C'est la partie.

C'était un peu difficile à expliquer vers la fin, mais ça ressemble à ça. Je vais mettre le code source terminé et le terminer!

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>

c'est tout! Si vous avez des inquiétudes, laissez un commentaire : kissing_closed_eyes: chu ☆