Im Team wurde ich plötzlich gefragt, wie man Karussellbilder implementiert. Ich bin seit mehr als einem Jahr im Front-End-Feld, aber ich habe es schon lange selbst nicht mehr geschrieben. Ich habe immer ein Plug-In verwendet, um es in Daniu zu schreiben. Heute werde ich ein einfaches Tutorial schreiben, das für Anfänger gelernt wird. Natürlich gibt es viele Implementierungsprinzipien und Designmuster von Karusselldiagrammen. Ich spreche hier, um sie mit prozessorientierter funktionaler Programmierung zu implementieren. Im Vergleich zu objektorientierten Entwurfsmustern erscheint der Code zwangsläufig aufgebläht und überflüssig. Der Mangel an objektorientierter Abstraktion ist jedoch sehr geeignet, um Anfänger zu verstehen und zu lernen. Studenten, die bereits in Bat sind, hoffen, weniger zu spritzen. Sie können auch mehr Vorschläge machen.
Das Prinzip des Karusselldiagramms:
Eine Reihe von Bildern der gleichen Größen wird gekachelt, wobei das CSS -Layout nur ein Bild angezeigt wird, und der Rest ist versteckt. Die automatische Wiedergabe wird erreicht, indem der Offset mithilfe des Timers berechnet oder Bilder wechseln, indem Sie manuell auf Ereignisse klicken.
HTML -Layout
Zunächst speichert der übergeordnete Container -Container alle Inhalte, und die Liste der untergeordneten Container enthält Bilder. Taste der Subcontainer -Schaltflächen.
<div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" /> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/1.jpg" /> </div> <div id="buttons"> <span index="1"></span> <span index="2"></span> <span index="3"></span> <span index="3"></span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javaScript:;" id = "prev"> <</a> <a href = "javaScript:;" id = "next" >> </a> </div>
Optimieren Sie nahtloses Scrollen.
Wenn Sie vom letzten Bild zum ersten Bild wechseln, gibt es eine große Lücke und verwenden zwei Hilfsbilder, um diese Lücke zu schließen.
Hier ist ein nahtloser Scrollen, schauen Sie sich den Code direkt an, kopieren Sie das letzte Bild, bevor Sie das erste Bild platzieren, und kopieren Sie das erste Bild hinter dem letzten Bild. Und verbergen Sie das erste Bildhilfsbild (eigentlich das fünfte Bild tatsächlich angezeigt, also setzen Sie Style = "links: -600px;").
CSS -Modifikation
1. Verständnis des Box -Modells, des Dokumentsflusss und der absoluten Positionierungsprobleme.
2. Achten Sie auf den Überlauf: versteckt der Liste; Zeigen Sie nur ein Bild des Fensters an und verbergen Sie die linke und rechte Seite.
3. Stellen Sie sicher, dass jede Spannweite in den Tasten gekrönt ist, und stellen Sie sie nach oben ein. (Z-Index: 999)
* {Margin: 0; Padding: 0; Textdekoration: Keine;} Körper {Padding: 20px;}#Container {Breite: 600px; Höhe: 400px; Border: 3px Solid#333; Überlauf: Hidden; Position: Relative;}#list: 4200px; Höhe: 400px; {Breite: 600px; Höhe: 400px; Float: links;}#Buttons {Position: absolut; Höhe: 10px; Breite: 100px; Z-Index: 2; unten: 20px; links: 250px;}#Buttons Span {Cursor: Pointer; Float; Border; Border: 1px. #333; Margin-Right: 5px;} #Schaltflächen .on {Hintergrund: orangeriert;}. Pfeil {Cursor: Zeiger; Anzeige: Keine; Linienhöhe: 39px; Text-Align: Mitte; Schriftgröße: 36px; Schrift-Weight: 40px; Rgba (0, 0, 0, .3); Farbe: #fff;}. Pfeil: Hover {Hintergrundfarbe: RGBA (0, 0, 0, .7);}#Container: Hover .arrow {display: block;}#prev {links: 20px;}#next {rechts: 20px;}}}JS
Zunächst erkennen wir zunächst den Effekt, auf die linken und rechten Pfeile zu klicken, um das Bild zu wechseln:
window.onload = function () {var list = document.getElementById ('list'); var prev = document.getElementById ('prev'); var next = document.getElementById ('next'); Funktion Animate (Offset) {// // Was erhältlich ist. mit ParseinT () gerundet werden, um es in eine Zahl umzuwandeln. var newleft = parseInt (list.style.left) + offset; list.style.left = newleft + 'px';} prev.onclick = function () {animate (600);} next.onclick = function () {animim (-600);}}}}}}}}}}}}}}}}}}}}}}}}}}}Nach dem Laufen werden wir feststellen, dass wenn Sie weiter auf den richtigen Pfeil klicken, es leer ist und Sie nicht zum ersten Bild zurückkehren können. Klicken Sie auf den linken Pfeil, um zum ersten Bild zurückzukehren.
Mithilfe von Google Chrome F12 ist der Grund dafür, dass wir den Offset verwenden, um das Bild zu erhalten. Wenn wir sehen, dass der linke Wert weniger als 3600 beträgt, gibt es leer, wenn es kein 8. Bild gibt. Daher müssen wir hier ein Urteil über den Offset machen.
Fügen Sie diesen Absatz zur animierten Funktion hinzu:
if (newleft <-3000) {list.style.left = -600 + 'px';} if (newleft> -600) {list.style.left = -3000 + 'px';}OK, fahre es aus, kein Problem. Karussellbilder sind, wie der Name schon sagt, Bilder, die Sie bewegen können. Zu diesem Zeitpunkt müssen wir den integrierten Objekttimer des Browsers verwenden.
Für Timer ist es notwendig, den Unterschied zwischen setInterval () und setTimeout zu erklären. Einfach ausgedrückt, setInterval () wird mehrmals ausgeführt und setTimeout () wird nur einmal ausgeführt.
Für eine genauere Verwendung können Sie auf den Link klicken, um den Unterschied anzuzeigen: Fenster.
Hier verwenden wir setInterval (), da unser Bild scrolliert werden muss. Unten einfügen
var timer; function play () {timer = setInterval (function () {prev.onclick ()}, 1500)} Play ();Lauf, ok!
Wenn wir jedoch ein bestimmtes Bild sorgfältig betrachten möchten, müssen wir das Bild stoppen und können den Timer einfach löschen. Diese Methode wird hier verwendet.
Hier müssen wir mit seinem DOM arbeiten und den gesamten Karussellkartenbereich erhalten.
var container = document.getElementById ('Container'); Funktion stop () {ClearInterval (Timer);} ContainerAber hier wurde ein Karussellbild im Grunde genommen abgeschlossen, und einige Schüler werden sich fragen, also ist es so einfach. Hast du die Reihe kleiner Punkte unter dem Bild gesehen? Ich habe Ihnen Funktionen hinzugefügt.
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Hier ist die aktualisierte Version:
var buttons = document.getElementById ('buttons'). getElementsByTagName ('span'); var index = 1; function buttonsShow () {// Der vorherige Stil muss für (var i = 0; i <i <Länge; Length; i ++) {if (buttons [i] .Classname == ') {{}) {{}) {{}) gelöscht werden. Array beginnt mit 0, so dass der Index -1 -Buttons [INDEX -1] .CLASSNAME = 'on';} pre.onclick = function () {index -= 1; if (index <1) {index = 5;} buttonsShow (); animim (600);} als nächstes erhöht. Wir haben nur 5 kleine Punkte, daher müssen wir einen Urteilsindex += 1 erstellen; if (index> 5) {index = 1;} buttonsShow (); Animate (-600);}Es scheint jetzt viel normaler, aber wir möchten jederzeit auf eine der kleinen Punkte mit der Maus klicken und zum entsprechenden Bild wechseln. Das gleiche Prinzip ist, dass wir das entsprechende Bild noch durch den Offset finden müssen.
für (var i = 0; i <buttons.length; i ++) {buttons [i] .onclick = function () {// optimieren, klicken Sie auf den aktuellen Punkt im aktuellen Bild und führen Sie den folgenden Code nicht aus. if (this.className == "on") {return;}/* offset GET: Hier erhalten Sie die Position, in der sich die Maus zum Punkt bewegt ParseInt (this.getAttribute ('index')); var offset = 600 * (clickIndex - index); animate (offset); // Speichern Sie die Position nach dem Klick der Maus und verwenden Sie die Punkte als normaler Index = clickIndex; buttonsShow ();}}Jeder, Sie haben vielleicht entdeckt, dass dieses Karussellbild etwas seltsam und unvorhersehbar ist. Es wechselt nach links, also schreiben Sie es neu:
Funktion play () {// Schalten Sie das Karussellbild, um das Bild auf den rechten Timer zu wechseln. 0; Textdekoration: Keine;} Körper {Padding: 20px;}#Container {Breite: 600px; Höhe: 400px; Border: 3px solid#333; Überlauf: versteckt; Position: relativ;}#list {width: 4200px; Höhe: 400PX; 600px; Höhe: 400px; Float: links;}#Buttons {Position: absolut; Höhe: 10px; Breite: 100px; z-Index: 2; unten: 20px; links: 250px;}#Buttons Span {CurSor: Zeiger; #333; Margin-Right: 5px;} #Schaltflächen .on {Hintergrund: orangeriert;}. Pfeil {Cursor: Zeiger; Anzeige: Keine; Linienhöhe: 39px; Text-Align: Mitte; Schriftgröße: 36px; Schrift-Weight: 40px; Rgba (0, 0, 0, .3); Farbe: #fff;}. Pfeil: Hover {Hintergrundfarbe: Rgba (0, 0, 0, .7);}#Container: Hover .Arrow {Anzeige: Block;}#prev {links: 20px;}#rechts: Verwendung*//*DOM -Ereignis*//*Timer*/window.onload = function () {var container = document.getElementById ('Container'); var list = document.getElementById ('list'); var buttons = document.getElementById ('buttons'). document.getElementById ('next'); var index = 1; var timer; function animate (offset) {// Was erhalten wird ist style.left, was ist die Entfernung, um relativ nach links zu kommen, also nach dem ersten Bild, style. var newleft = parseInt (list.Style.left) + offset; list.style.left = newleft + 'px'; // Infinite Scrolling -Urteilsvermögen if (newleft> -600) {list.style.left = -3000 + 'px';} if (newleft <-3000) {list.style.style.style.style.style.style.Style.Style.Style.Style.Style.Style.Style.Le.Left = -600 + '; play() {//Repeated execution timer = setInterval(function () {next.onclick();}, 2000)}function stop() {clearInterval(timer);}function buttonsShow() {//Clear the style of the previous small dot for (var i = 0; i < buttons.length; i++) {if (buttons[i].className == "on") {buttons [i] .className = "";}} // Das Array startet von 0, so dass der Index -1buttons [index -1] .classname = "on";} prev.onclick = function () {Index -= 1; if (Index <1) {index = 5}} -Funktion () (); des obigen Timers erhöht sich der Index weiter. Wir haben nur 5 kleine Punkte, daher müssen wir einen Urteilsindex+= 1; if (index> 5) {index = 1} animim (-600); buttonsShow ();}; für (var i = 0; i <buttons.Length; i ++) {Buttons [i] .Onclick = Funktion () -Funktion () {//. if (this.className == "on") {return;}/* Hier erhalten wir die Position, in der sich die Maus zum Punkt bewegt. Verwenden Sie diesen, um den Index an die Objektschaltflächen zu binden. ParseInt (this.getAttribute ('index')); var Offset = 600 * (ClickIndex - Index); // Dieser Index ist indexanimiert (Offset); index = clickIndex; // Speichern Sie die Position nach dem Klick der Maus und verwenden Sie sie, um die DOTSSHOW ();}} Container anzuzeigen. src = "img/1.jpg"/> <img src = "img/2.jpg"/> <img src = "img/3.jpg"/> <img Src = "img/4.jpg"/> <img Src = "img/5.jpg"/> <img Src = "IMg/5.JPG"/> <img Src = "/iMg Src ="/ ^/<img "/<img Src ="/<img "/> <img Src =" iMg/JPG "/> <IMG Src =" iMg/5.jpg "/> <img Src ="/<Mevers ". src="img/2.jpg"/><img src="img/3.jpg"/><img src="img/4.jpg"/><img src="img/5.jpg"/><img src="img/1.jpg"/></div><div id="buttons"><span index="1"></span><span Index = "2"> </span> <span index = "3"> </span> <span index = "4"> </span> <span index = "5"> </span> </div> <a href = "javaScript:;" id = "prev"> </a> <a href = "JavaScript:;" id = "next" >> </a> </div> </body> </html>Das obige ist der einfache JS -Karussellcode, der Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!