Der Autor hat bereits ein
Karussellskript veröffentlicht , das auch nur CSS und Javascript verwendet. Schauen wir uns nun das Slider-Skript an. Es unterscheidet sich vom Karussell dadurch, dass jeweils nur ein Element sichtbar ist und nicht mehrere, und die Elemente nicht scrollen, sondern langsam durch einander ersetzt werden. Und mehr. In diesem Schieberegler werden nur Bilder (Folien) als Elemente verwendet, daher wird er als einfacher Bildschieberegler bezeichnet.
Die Navigation erfolgt über die Pfeile „Nächstes Element“ oder „Vorheriges Element“ und die Anzeigepunkte. Pfeile und Punkte können in den Skripteinstellungen deaktiviert werden. Elemente können mit einem Stopp am ersten und letzten Element oder in einem Zyklus angezeigt werden, wenn auf das letzte Element wieder das erste folgt. Sie können die automatische Anzeige (Scrollen) von Elementen aktivieren, die Anzeigedauer (das Intervall zwischen dem Umschalten) ist einstellbar. Wenn Sie mit der Maus über ein Element fahren, wird das Scrollen gestoppt.
Der Schieberegler passt sich automatisch an jede Bildschirmbreite eines Geräts an. Sie können dies überprüfen, indem Sie eine der Seiten des Browsers nach links oder rechts bewegen.
HTML - Der Schiebereglercode ist Standard, mit einer Ausnahme: Vor den Bildern wird ein Bildschirm platziert, bei dem es sich um ein einfaches weißes Bild handelt. Alle Bilder und der Bildschirm sollten gleich groß sein. Die Anzahl der Bilder ist beliebig.
<div class="sim-slider"> <ul class="sim-slider-list"> <li><img src="screen.gif" alt="screen"></li> <li class="sim-slider-element"><img src="img1.jpg" alt="1"></li> <li class="sim-slider-element"><img src="img2.jpg" alt="2"></li> … <li class="sim-slider-element"><img src="imgN.jpg" alt="N"></li> </ul> <div class="sim-slider-arrow-left"></div> <div class="sim-slider-arrow-right"></div> <div class="sim-slider-dots"></div> </div>
Die <ul> <li> -Tags wurden als Container verwendet, Sie können jedoch entweder <div> <div> oder <div> <p> verwenden. Pfeile und Anzeigepunkte befinden sich absolut in den jeweiligen Behältern. Für Pfeile werden Muster in Form von dreieckigen Klammern verwendet, die Sie bei Bedarf durch Ihre eigenen Muster ersetzen können. Punkte werden vom Programm generiert, die Anzahl der Punkte entspricht der Anzahl der Bilder.
Alle Bilder werden übereinander gestapelt und in der oberen linken Ecke des umschließenden Containers absolut positioniert. Der Bildschirm verhindert das Zusammenfallen des Außenbehälters. Allen Bildern wird die Deckkraft der CSS-Eigenschaft 0 zugewiesen, mit Ausnahme des ersten Elements, dem das Initialisierungsprogramm die Deckkraft 1 zuweist, wodurch es sichtbar wird.
Das Scrollen von Elementen erfolgt durch sanftes Ändern der Deckkraft von 1 auf 0 für das sichtbare Element und von 0 auf 1 für das nächste unsichtbare Element. Somit wird das sichtbare Element unsichtbar und das unsichtbare sichtbar. Die Übergangsglätte erzeugt eine Übergangseigenschaft mit einer Dauer von 1 s und einer einfachen Übergangsfunktion.
CSS img { width: 100%; !important; } .sim-slider { position: relative; } .sim-slider-list { margin: 0; padding: 0; list-style-type: none; position: relative; } .sim-slider-element { width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; } div.sim-slider-arrow-left, div.sim-slider-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; } div.sim-slider-arrow-left { left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; } div.sim-slider-arrow-right { right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; } div.sim-slider-arrow-left:hover { opacity: 1.0; } div.sim-slider-arrow-right:hover { opacity: 1.0; } div.sim-slider-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; } span.sim-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }
Damit sich der Schieberegler an eine beliebige Bildschirmbreite anpassen kann, müssen Sie für die Bilder die Breite der CSS-Eigenschaft angeben: 100%. Für alle Blockcontainer (div, ul, li usw.) auch width: 100% oder, wenn Sie width in numerischen Einheiten benötigen, nur max-width oder min-width.
Stile sind wie gewohnt in der Kopfzeile enthalten. Das Skript kann beim Onload-Ereignis oder am Ende des HTML-Markups verbunden werden. Die Slider-Skriptdatei sieht möglicherweise folgendermaßen aus:
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Simple slider</title> <link rel="stylesheet" type="text/css" href="sim-slider-styles.css"> </head> <body> … <div class="sim-slider"> … </div> … <footer> … </footer> <script src="sim-slider.js"></script> <script>new Sim()</script> </body> </html>
Der Slider wird mit dem Namen der Sim-Slider-Klasse oder mit einem Bezeichner aufgerufen. Im zweiten Fall können Sie mehrere Schieberegler auf einer Seite platzieren.
<div class="sim-slider" id="first"> … <div class="sim-slider" id="second"> … <script>new Sim("first"); new Sim("second");</script>
Javascript function Sim(sldrId) { let id = document.getElementById(sldrId); if(id) { this.sldrRoot = id } else { this.sldrRoot = document.querySelector('.sim-slider') };
Alle Bilder stammen aus Open Source.Vielen Dank für Ihre Aufmerksamkeit!