J'ai partagé un algorithme de graphique de carrousel qui change la hiérarchie auparavant. Aujourd'hui, je continue à utiliser la transparence pour obtenir un algorithme de graphique de carrousel sans déplacement.
Logique d'implémentation: positionnez toutes les images à stimuler ensemble, c'est-à-dire, empilez-les de couche par calque et utilisez les attributs hiérarchiques pour ajuster l'ordre d'image correct, définir la transparence de l'image à 0, puis faire la transparence de la première image initiale à 1. L'algorithme spécifique est le suivant:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Modifier l'algorithme de transparence (classique) </title> <style media = "screen"> * {margin: 0; rembourrage: 0; } .wrap {largeur: 60%; marge: auto; Position: relative; } .wrap img {largeur: 100%; Position: absolue; à gauche: 0; en haut: 0; transition: 2s; } .wrap img: nth-child (1) {position: relative; } .wrap .follow {width: 150px; hauteur: 30px; marge: auto; Affichage: flex; justifier-contenu: espace-intermédiaire; } .wrap. hauteur: 10px; Border-Radius: 50%; Border: 3px gris massif; } .wrap. } </ style> </ head> <body> <div> <img src = "img / 01.jpg" /> <img src = "img / 02.jpg" /> <img src = "img / 03.jpg" /> <img src = "iMg / 04.jpg" /> <Entrée ID = "gauche value = "◀︎"> <input id = "reightbut" type = "Button" name = "name" value = "▶ ︎"> <div> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </ span> </span> </ body> <script type = "text / javascrip document.QuerySelectorAll ('. Wrap IMG'); var spans = document.QuerySelectorAll ('. Suivre Span'); var LeftBut = document.getElementById ('LeftBut'); var droitbut = document.getElementById ('justice'); // Définissez la fonction de paramètre showImage (index) {for (var i = 0; i <images.length; i ++) {spans [i] .index = i; // Attributs personnalisés, obtenez les images d'indice correspondantes [i] .index = i; '0'; // Attribuez toute la transparence de l'image à 0 Spans [i] .Style.Background = 'Gray'; // Tous les couleurs de beijing sont définies sur noir} // attribuent la transparence de l'image de la valeur d'indice du paramètre entrant à 1 images [index] .style.opacity = '1'; // Attribuez la couleur d'arrière-plan de l'image avec la valeur des indices du paramètre entrant aux portes blanches [index] .style.background = 'white'; } showImage (0); // Définissez initialement le style de l'image avec la valeur des indices du paramètre entrant sur 0 var count = 1; // Get Counter // Définissez la fonction de carrousel automatique ImageMove () {// Si la valeur du nombre peut être divisible par 4, puis réaffecter le nombre de comptage à 0; if (count% 4 == 0) {count = 0; } // transmettez la valeur de nombre comme paramètre à la fonction showImage (); showImage (count); Count ++; // exécuter une fois +1} // définissez la fonction ImageMove () pour appeler une fois toutes les deux secondes et l'attribuer à ImageInitialMove var ImageInitialMove = setInterval ('ImageMove ()', 2000); // cliquez sur la gauche à l'événement LeftBut.OnClick = function () {// Effacer le Timer ClearInterval (ImageInitialMove); // Étant donné que la direction est opposée à la roue automatique, il est nécessaire de juger que la valeur du décompte est de 0, de la réaffecter à 4 et de continuer à boucler si (count == 0) {count = 4; } count -; showImage (count); // appelant le nombre de fonctions d'abord à partir de -imageInitialMove = setInterval ('ImageMove ()', 2000); } // le droit à droite.onclick = function () {ClearInterval (ImageInitialMove); ImageMove (); // Parce que la direction est la même que le carrousel automatique, appelez directement // réaffecter la minuterie ImageInitialMove = setInterval ('ImageMove ()', 2000); } // Cliquez sur l'événement pour DOTS pour (var i = 0; i <spans.length; i ++) {spans [i] .OnClick = function () {ClearInterval (ImageInitialMove); // Attribuez la valeur de l'indice du point actuellement cliqué pour compter compter = event.target.index; // appelle la fonction showImage (count); ImageInitialMove = setInterval ('ImageMove ()', 2000); }} </ script> </html>Merveilleux sujet Partage: JQUERY Picture Carrousel Javascript Picture Carrousel Bootstrap Picture Carrousel
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.