Dieses Tutorial führt Sie durch die Erstellung eines Bildschiebereglers mithilfe der jQuery-Bibliothek.

Dieses Tutorial besteht aus vier Teilen:
- HTML
- SCSS
- JS
- Verweise
HTML
Wir werden Bootstrap für dieses Tutorial verwenden, damit die Dinge gut aussehen, ohne viel Zeit zu verbringen.
Unsere Struktur wird wie folgt sein:
In unserer ul
Klasse werden slides
wir Folgendes haben:





In unserer .buttons
Klasse sollten Sie Folgendes haben:
Hier ist ein Beispiel, wie Sie html
aussehen sollten:
Hinweis: Sie sollten das src
Bildattribut durch Ihren eigenen Inhalt ersetzen .





SCSS
Wir verwenden Sass und die SCSS-Syntax, damit wir Variablen verschachteln und verwenden können

Wir können das folgende SCSS verwenden, um unser Styling zu definieren:
// Variables $width: 720px; .slider { width: $width; height: 400px; overflow: hidden; margin: 0 auto; text-align: center; .slides { display: block; width: 6000px; height: 400px; margin: 0; padding: 0; } .slide { float: left; list-style-type: none; width: $width; height: 400px; img { width: 100%; height: 100%; } } } .buttons { margin: 0; width: $width; position: relative; top: -40px; margin: 0 auto; .play { display: none; } .btn { display: flex; margin: 0 auto; text-align: center; } }
JS
Variablen
Im folgenden Codeausschnitt definieren wir Variablen, die später in unserem Code verwendet werden.
var animationSpeed = 1000; // How quickly the next slide animates. var pause = 3000; // The pause between each slide.
Wir werden eine leere Variable verwenden, in der wir die setInterval
Methode aufrufen :
var interval;
Animation Wir werden unsere Slider-Animationen in eine Funktion einbinden:
function startSlider() {}
Wir verwenden die setInterval()
native JavaScript-Methode, um den Inhalt der Funktion auf einem zeitbasierten Trigger zu automatisieren.
interval = setInterval(function() {}, pause);
Wir verwenden die pause
Variable, um zu sehen, wie viele Millisekunden gewartet werden muss, bevor die Funktion erneut aufgerufen wird. Weitere setInterval
Informationen zur nativen Methode finden Sie hier: //developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. In unserer Funktion verwenden wir jQuery, um mit der Geschwindigkeit der Variablen animationSpeed zwischen Folien zu wechseln:
$('.slides > li:first') .fadeOut(animationSpeed) .next() .fadeIn(animationSpeed) .end() .appendTo('.slides');
Wir zielen auf die erste Folie mit $('.slides > li:first')
. - .fadeOut(animationSpeed)
wird die erste Folie ausblenden und dann mit verwenden .next()
, gehen wir zur nächsten Folie. - Sobald wir zur nächsten Folie übergegangen sind, werden wir sie einblenden : .fadeIn(animationSpeed)
. - Diese Sequenz wird bis zur letzten Folie ( .end()
) fortgesetzt , dann stoppen wir die Animation. Wir werden jetzt die startSlider
Funktion aufrufen , um die Animation zu starten:
startSlider ();
Wiedergabe und Pause Diese Funktion ist optional, aber recht einfach zu implementieren. Wir werden die Wiedergabetaste ausblenden, sodass wir nicht sowohl die Wiedergabe- als auch die Pause-Taste sehen:
$('.play').hide(); // Hiding the play button.
Wir erstellen jetzt unsere Pause-Schaltfläche (wird beim Laden der Seite automatisch angezeigt):
$('.pause').click(function() { clearInterval(interval); $(this).hide(); $('.play').show(); });
Wir rufen unsere Funktion jedes Mal auf, wenn mit jQuery auf die Pause-Schaltfläche geklickt wird. - Wir entfernen das Intervall mit der clearInterval
Methode und verwenden unsere interval
Variable als Parameter, um anzugeben, welches Intervall gestoppt werden soll. - Da unser Schieberegler angehalten ist, wird die Pause-Schaltfläche mit ausgeblendet $(this).hide();
. Hinweis: Wir verwenden this
, was sich auf das bezieht, was unsere Eltern anrufen, dh .pause
. - Wir zeigen dann unsere Wiedergabetaste, damit der Benutzer die Animation fortsetzen kann : $('.play').show();
. Der folgende Code richtet unsere Wiedergabetaste ein (wird beim Laden der Seite automatisch ausgeblendet):
$ ('. play'). click (function () {startSlider (); $ (this) .hide (); $ ('. pause'). show ();});
Wir werden unsere Funktion jedes Mal aufrufen, wenn mit jQuery auf die Wiedergabetaste geklickt wird.
- Wir werden das Intervall mit der
startSlider
Funktion starten oder neu starten . - Da unser Schieberegler gerade abgespielt wird, wird die Wiedergabetaste mit ausgeblendet
$(this).hide();
. Hinweis: Wir verwendenthis
, was sich auf das bezieht, was unsere Eltern anrufen, dh.play
. - Wir werden dann unsere Pause-Schaltfläche anzeigen, damit der Benutzer die Animation nach Belieben stoppen kann :
$('.pause').show();
.
Verweise
- Überprüfen Sie den Quellcode und das Beispiel auf CodePen für dieses Tutorial.