Carousel -Diagramme sind in zukünftigen Anwendungen noch relativ häufig und können ohne viel Code -Linie implementiert werden. Wenn Sie jedoch nur das Grundwissen von JS beherrschen, wie können Sie dann weniger und einfache logische Methoden verwenden, um dies zu erreichen? Hier sind verschiedene Praktiken:
1. Verwenden Sie die Verschiebungsmethode, um zu erreichen
Zunächst können wir dem Körper eine DIV hinzufügen und die Breite auf einen Prozentsatz (adaptive Seite) setzen. Wenn der Anteil spezifisch für den Prozentsatz ist, zu dem sie relativ zu ist, werden wir dies entsprechend den Bedürfnissen tun. Ich werde hier nicht viel sagen. Legen Sie das Bild in die Div.
Zweitens setzt der Stilteil alle IMG -Tags auf absolute, um die Positionierung zu erleichtern
Schließlich spricht der JS -Teil über die Logik und definiert zwei leere Arrays. Das erste Array wird verwendet, um das auf der Seite angezeigte erste Bild und das auf die Eingabe gewarte Bild zu speichern, und das zweite Array speichert die verbleibenden N -Bilder. Angenommen, diese beiden Arrays sind auf: WaitToShow = [] eingestellt; und Goout = []; WaitToShow.Shift (); Wenn das erste Bild als Showfirst bezeichnet wird und die Verschiebung und die Bewegungszeit für das Showfirst -Bild festgelegt sind. Nachdem die Ausführung abgeschlossen ist, setzen Sie das Showfirst in den Schwanz von Goout: gout.push (showfirst); Zu diesem Zeitpunkt wird das 0. Element des WaitToShow -Arrays zum ursprünglichen zweiten Bild, das angezeigt wird. Legen Sie die Verschiebungs- und Bewegungszeit für dieses Bild WaitToShow [0] fest und geben Sie das erste Elementbild des Gout -Arrays auf und legen Sie es in den Schwanz des WaitToShow -Arrays, um sicherzustellen, dass das WaitToShow -Array immer ein angezeigter Bild und das zu angezeigte Bild ist. Auf diese Weise bilden die beiden Arrays eine Schleife, um die Implementierung des Karussellbildes zu vervollständigen. Die umgekehrte Logik ist die gleiche (da die Logik zu kompliziert ist, wird sie hier nicht empfohlen)
2. Die Methode zur Verwendung der Ebene der Hierarchie, um das obere Bild zu ändern (diese Methode hat keine Verschiebungsaktionen, aber die Logik ist sehr einfach und praktisch)
Es ist intuitiver, direkt zu codieren: Grundsätzlich enthält jede Zeile Kommentare
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Karusselldiagramm (Flash adaptive) </title> <style media = "screen">* {margin: 0; padding: 0;}. Wrack {Breite: 60%; Absolute;/*Z-Index: 10;*/} Eingabe {Grenze: 1px solides LightGray; Breite: 50px; Höhe: 30px; Hintergrund: rot; Border-Radius: 5px; Schriftgröße: 20px;} </style> </head> <body> <div> <img /><img src="img/03.jpg" /><img src="img/04.jpg" /></div><input type="button" id="butLeft" name="name" value="◀︎"><input type="button" id="butRight" name="name" value="▶︎"></body><script type="text/javascript">// Get the Bilder Element zum Erstellen eines String -Arrays. Das String -Array kann Push -Pop -Splice oder andere Operationen nicht ausführen // Es muss seinen Wert in ein Array einbeziehen, wobei die Definition danach var bilder = document.GetElementsByTagName ('img'); var bastleft = document.GetElementById ('Butleft'); var Butright = Dokument. 1000; // Erhalten Sie ein leeres Array, um die Zeichenfolgenelemente in Bildern zu speichern. ihnen. Je höher das Bild ist, desto höher ist die Level -Einstellung, also -i, so dass die Bilder von den ersten und zweiten Bildern in der Reihenfolge sein. = Bildess.Shift (); // Setzen Sie ein Level für das geknallte Bildelement, dh -1000 + count, // Machen Sie das Niveau im Vergleich zu anderen Elementen, das Bild wird am Kopf des Arrays angezeigt. Fügen Sie 1 hinzu, betrachten Sie den spezifischen Wert nicht, klicken Sie einfach auf das Ereignis plus 1 count ++;} // Klicken Sie auf das Ereignis auf der rechten Butright. INDEX+COUNT; // Fügen Sie nach dem Pegel geändert, in den Kopf der Array Imagess Images.Der obige Must-Read-Artikel zum Basic JS (einfache Implementierung von Click Event Carousel) ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.