So erstellen Sie einen einfachen Image -Schieberegler mit HTML, CSS und JQuery

Bild Karussells, Bildschieber, egal warum Sie sie anrufen, dieser Modus ist im Internet so sichtbar, dass fast jede Website eine hat. Wenn Sie ein Webentwickler sind, können Sie selbst eine selbst bauen. Lassen Sie uns vor diesem Hintergrund sehen, wie Sie einen einfachen Bildschieberegler mit HTML, CSS und JQuery erstellen.

HTML -Struktur

Erstens erstellen wir ein Containerelement, das den Klassennamen container enthält. Der Behälter enthält unsere Bilder. Das Bild ist mit div -Tags umwickelt, so dass die Diashow in einen Link konvertiert werden kann oder ein anderes Inhalt als das Bild als Diashow verwendet werden kann. Der erste Container div verfügt über einige Inline -Stile, um sicherzustellen, dass das erste Bild im Schieberegler beim Laden der Seite sichtbar ist. Es gibt auch zwei Tastenelemente für manuelles Schleifen durch Diashows basierend auf Benutzeranfragen.

CSS -Stil

Hier setzen wir den Bild -Schieberegler, den Container div und die Breite ihrer internen Bilder. Es ist zu beachten, dass alle unsere Container div auf display: none; gesetzt sind. Wenn dies nicht der Fall ist, sind alle unsere Bilder gleichzeitig sichtbar. Wir werden JavaScript verwenden, um einen Container div festzulegen, und der Rest bleibt versteckt. display: inline-block;

JavaScript -Interaktion

Erstens müssen wir einige wichtige Variablen definieren. Die erste Variable ist

, die auf 0 gesetzt ist. Die zweite Variable ist currentIndex, die auf items gesetzt ist. Dadurch wird eine Liste von Containern zurückgegeben, die Bilder enthalten. Die dritte Variable ist $('.container div'), die auf die Länge der Variablen eingestellt ist. Die letzte Variable zeigt uns die Gesamtzahl der Folien im Bildschieberegler an. div itemAmt Als nächstes erstellen wir eine Funktion namens "CycleItems". Diese Funktion wird verwendet, um das richtige Bild anzuzeigen und gleichzeitig sicherzustellen, dass andere Bilder verborgen bleiben. In dieser Funktion erstellen wir eine Variable namens items. Diese Variable wird auf

gesetzt. Die von JQuery bereitgestellte

-Methode nimmt eine Ganzzahl und findet das erste von item zurückgegebene Element, das mit der Ganzzahl übereinstimmt. Wenn $('.container div').eq(currentIndex) 0 ist, wird eq auf den ersten Bildbehälter im Bildschieberegler positioniert. In unserer $('.container div') -Funktion verstecken Sie alle unsere Bildbehälter currentIndex und setzen Sie $('.container div').eq(currentIndex) auf cycleItems. div

Um sicherzustellen, dass sich unser Bild automatisch dreht, müssen wir eine Möglichkeit bieten, unsere cycleItems -Funktion kontinuierlich aufzurufen, nachdem ein bestimmter Zeitraum vergangen ist. Wir tun dies, indem wir eine andere Variable namens autoSlide erstellen. Diese Variable speichert eine setInterval -Funktion, die eine Verzögerung von 3000 Millisekunden oder drei Sekunden lang erfordert. In dieser Funktion fügen wir der currentIndex -Variablen 1 hinzu, sodass $('.container div').eq(currentIndex) immer auf den nächsten Container div verweist. Dann definieren wir eine sehr wichtige "wenn" -serklärung. Diese Aussage bedeutet, dass, wenn unsere currentIndex -Variable größer ist als die Gesamtzahl der Bilder im Schieberegler, die Variable auf Null zurückgesetzt wird. Wenn wir dies nicht haben, können wir unsere Bildliste nicht durchlaufen. Nach der IF -Anweisung nennen wir die cycleItems -Funktion.

Als nächstes definieren wir die vorherigen und nächsten Operationen. Diese definieren, was passiert, wenn wir auf die vorherigen und nächsten Schaltflächen klicken. Sie funktionieren ähnlich wie die autoSlide -Funktion, außer dass sie die automatische Schleife beim Klicken abbrechen. Um die Diashow manuell zu durchschleifen, wird die Taste currentIndex auf die Schaltfläche "Auf der nächste Schaltfläche" hinzugefügt. Durch Klicken auf die vorherige Schaltfläche wird die currentIndex -Revariable um 1 reduziert.

Demo

Zeigen Sie die Demo auf CodePen

an

zusätzliches Inhalt

Um den Bild -Schieberegler anzuzeigen, der nur mit CSS und HTML erstellt wurde, lesen Sie die Demo von Zack Wallace! (Der Link sollte hier eingefügt werden, und Sie können bei Bedarf einen Link angeben)

FAQ (FAQ)

(Dies kann nach dem ursprünglichen FAQ -Teil umgeschrieben und poliert werden, so dass der Sprachausdruck natürlicher und glatt ist, während die Konsistenz des Inhalts beibehält)

Durch die obigen Schritte können Sie einen einfachen Bildschieberegler erstellen. Denken Sie daran, dass Sie Ihren CSS -Stil und Ihren JavaScript -Code an Ihre Anforderungen an unterschiedliche Effekte anpassen können.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen einfachen Image -Schieberegler mit HTML, CSS und JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!