Ich habe einen Karussell -Graph -Algorithmus geteilt, der die Hierarchie zuvor verändert. Heute verwende ich weiterhin Transparenz, um einen verdrehungsfreien Karussell-Graph-Algorithmus zu erreichen.
Implementierungslogik: Positionieren Sie alle Bilder, um sie zusammenzuschließen, dh sie stapeln Sie sie für Schicht für Schicht und verwenden Sie die hierarchischen Attribute, um die richtige Bildreihenfolge anzupassen, die Transparenz des Bildes auf 0 einzustellen und dann die Transparenz des ersten ersten Bildes auf 1 zu machen. Der spezifische Algorithmus ist wie folgt:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Transparenzalgorithmus ändern (klassisch) </title> <style media = "screen"> * {Margin: 0; Polsterung: 0; } .wrap {width: 60%; Rand: Auto; Position: Relativ; } .wrap img {width: 100%; Position: absolut; links: 0; Top: 0; Übergang: 2s; } .wrap img: nth-Kind (1) {Position: Relativ; } .wrap .Follow {width: 150px; Höhe: 30px; Rand: Auto; Anzeige: Flex; Rechtfertigungsbekämpfung: Weltraum zwischen; } .wrap .Follober span {width: 10px; Höhe: 10px; Grenzradius: 50%; Grenze: 3px Festgrau; } .wrap .Follober span: hover {cursor: pointer; } </style> </head> <body> <div> <img src = "img/01.jpg"/> <img src = "img/02.jpg"/> <img src = "img/03.jpg"/> <img src = "img/04.jpg"/> <input = "type" type "type" type "type". value = "◀︎"> <input id = "rightBut" type = "button" name = "name" value = "︎"> <div> <span> </span> <span> </span> <pan> </span> <span> </span> <span> </span> </span> </diviL </body> </body = "script type" text/javaScript "> <///body> </body> </body =" text/javaScript "> </// body> </body> </body =" text/javascript "> document.querySelectorAll ('. Wrap img'); var spans = document.querySelectorAll ('. Follow span'); var links = document.getElementById ('linkBut'); var rightBut = document.getElementById ('rightBut'); // Definieren Sie die Parameterfunktion ShowImage (index) {für (var i = 0; i <images.length; i ++) {Spans [i] .Index = i; // benutzerdefinierte Attribute, erhalten Sie die entsprechenden Abbildungsbilder [i] .Index = i; // benutzerdefinierte Attribute, die entsprechenden Abbildungsbilder [i] .style.zindyle = 100 - i; // // ordnungsbilder. '0'; // Weisen Sie die gesamte Bildtransparenz zu 0 Spans [i] .Style.background = 'Gray'; // Alle Punkte bei Jungen an Schwarz eingestellt} // Die Bildtransparenz des eingehenden Parameter -Sagnrics -Werts auf 1 Bilder [Index] .Style.opacity = '1'; // Die Hintergrundfarbe des Bildes mit eingehender Parameter -Index -Wert an White Spans [Index] .Style.background = 'White' zuweisen; } showimage (0); // Setzen Sie den Stil des Bildes zunächst mit eingehender Parameter -Subscript -Wert auf 0 var count = 1; // Definieren Sie die automatische Karussellfunktion imagemove () {// Wenn der Wert der Anzahl durch 4 teilbar sein kann, dann werden die Anzahl auf 0 neu zuordnen. if (count % 4 == 0) {count = 0; } // Übergeben Sie den Zählwert als Parameter an die Funktion showimage (); Showimage (Graf); Zählen Sie ++; // Setzen Sie einmal +1} // Setzen Sie die Funktion imagemove () so, dass sie alle zwei Sekunden aufrufen und sie imageInitialMove var imageInitialMove = setInterval ('Imagemove (), 2000) zuweisen; // klicken Sie links zum Ereignis links. // Da die Richtung dem automatischen Rad entgegengesetzt ist, muss beurteilt werden, dass der Wert der Zählung 0 beträgt, es auf 4 zuordnen und weiterhin schleifen, wenn (count == 0) {count = 4; } count-; showImage (count); // Aufrufen der Funktion zählte zuerst aus -imageInitialMove = setInterval ('ImageMove ()', 2000); } // der rechts-zu-rightbut.onclick = function () {ClearInterval (ImageInitialMove); ImageMove (); // Anrufen, weil die Richtung mit dem automatischen Karussell die Timer -ImageInitialMove = setInterval ('Imagemove ()', 2000) anrufen; } // Klicken Sie auf Ereignis für Punkte für (var i = 0; i <Spans.Length; i ++) {Spans [i] .onclick = function () {ClearInterval (ImageInitialMove); // den Einweiswert des aktuell geklickten Punkts zu count count = event.target.index zuweisen; // die Funktionshowimage (count) aufrufen; ImageInitialMove = setInterval ('ImageMove ()', 2000); }} </script> </html>Wunderbares Thema Teilen: JQuery Bild Karussell JavaScript Bild Karussell Bootstrap Bild Karussell
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.