Les diagrammes de carrousel sont encore relativement courants dans les applications futures et peuvent être implémentés sans beaucoup de ligne de code. Mais si vous ne maîtrisez que les connaissances de base de JS, comment pouvez-vous utiliser des méthodes logiques moins et simples pour y parvenir? Voici des pratiques différentes:
1. Utilisez la méthode de déplacement pour atteindre
Tout d'abord, nous pouvons ajouter une div au corps et régler la largeur en pourcentage (page adaptative). Si la proportion est spécifique au pourcentage de qui il est relatif, nous le ferons en fonction des besoins. Je ne dirai pas grand-chose ici. Mettez l'image dans la div.
Deuxièmement, la pièce de style définit toutes les balises IMG sur Absolut pour faciliter le positionnement
Enfin, la partie JS parle de la logique, définissant deux tableaux vides. Le premier tableau est utilisé pour enregistrer l'image initiale affichée sur la page et l'image en attendant d'entrer, et le deuxième tableau enregistre les n images restantes. Supposons que ces deux tableaux sont définis sur: WaitToshow = []; et goout = []; waittoshow.shift (); Si la première image est nommée ShowFirst, et le temps de déplacement et de mouvement est défini pour l'image ShowFirst. Une fois l'exécution terminée, mettez le showFirst dans la queue de Goout: Goout.push (showFirst); À l'heure actuelle, le 0ème élément du tableau WaitShow devient la deuxième image d'origine à afficher. Réglez le temps de déplacement et de mouvement pour cette image WaitShow [0], et apparaissez la première image d'élément du tableau de retenue et mettez-la dans la queue du tableau d'attente pour vous assurer que le tableau d'attente est toujours une image affichée et l'image à afficher. De cette façon, les deux tableaux forment une boucle pour terminer la mise en œuvre de l'image du carrousel. La logique inverse est la même (car la logique est trop compliquée, elle n'est pas recommandée ici)
2. La méthode d'utilisation du niveau de la hiérarchie pour modifier l'image supérieure (cette méthode n'a pas de actions de déplacement, mais la logique est très simple et pratique)
Il est plus intuitif de coder directement: essentiellement chaque ligne a des commentaires
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tapie> Diagramme du carrousel (Flash Adaptive) </Title> <Style Media = "Screen"> * {margin: 0; padding: 0;}. Wrap {width: 60%; Background: Rouge: Auto; Position: Reclative;}.. Absolute; / * z-index: 10; * /} entrée {border: 1px Solid Lightgray; largeur: 50px; hauteur: 30px; fond: rouge; border-radius: 5px; font-size: 20px;} </ style> </ head> <body> <v> <img src = "img / 01.jpg" /> <img src = "img / 01.jpg" /> <img src = "img / 01" /> <img src = "img / 03.jpg" /> <img src = "img / 04.jpg" /> </ div> <entrée type = "bouton" id = "butleft" name = "name" value = "◀︎"> <entrée = "Button" id = "butright" name = "name" value = "▶ ︎ ︎> </ body> L'élément d'images pour générer un tableau de chaîne. Le tableau de chaîne ne peut pas effectuer Push Pop Splice ou d'autres opérations //, il doit donc redout sa valeur dans un tableau, avec la définition après var var images = document.getElementsByTagName ('img'); var butleft = document.getElementById ('Butleft'); variable index used uset = 1000; // Obtenez un tableau vide pour stocker les éléments de chaîne dans des images var images = []; // pour la boucle est utilisée pour attribuer des valeurs au tableau d'image et modifier le niveau d'éléments dans le tableau pour (var i = 0; i <images.length; i ++) {Imagess [i] = images [i] eux. Plus l'image est élevée, plus le paramètre de niveau est élevé, donc -I, de sorte que les images seront des première et deuxième images dans l'ordre ... vers le bas dans la séquence CurrentImage.Style.zindex = -i;} // Définissez le comptage de comptes, effectuez un événement de clic (gauche ou droit) plus 1var Count = 0; = Immess.shift (); // définir un niveau pour l'élément d'image éclaté, c'est-à-dire, -1000 + comptage, // faire le niveau le plus petit par rapport aux autres éléments, l'image est apparue à la tête du tableau sera affichée en bas du showFirst.style.zindex = - Index + Count; // Une fois le changement de niveau, push it dans la queue de l'arrivée. to add 1, do not consider the specific value, just click event plus 1 count++;}// Click the event to the right butRight.onclick = function() {// Pop up an element from the tail of images and assign it to showFirstvar showFirst = imagess.pop();// Set the level of showFirst to the maximum, 1000+count, so it will be displayed on the first layer showFirst.style.zindex = index + count; // Une fois le niveau change, insérez-le dans la tête du tableau Images Images.unShift (showFirst); // Cliquez une fois pour ajouter 1Count ++;} </cript> </html>L'article à lire ci-dessus sur le JS de base (implémentation simple de Click Event Carrousel) est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.