So erstellen Sie einen Bildschieberegler mit jQuery

Programmierung

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

GIF zeigt Slider in Aktion

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 ulKlasse werden slideswir Folgendes haben:

    • In unserer .buttonsKlasse sollten Sie Folgendes haben:

    Hier ist ein Beispiel, wie Sie htmlaussehen sollten:

    Hinweis: Sie sollten das srcBildattribut durch Ihren eigenen Inhalt ersetzen .

    SCSS

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

    : heart_decoration:

    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 setIntervalMethode 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 pauseVariable, um zu sehen, wie viele Millisekunden gewartet werden muss, bevor die Funktion erneut aufgerufen wird. Weitere setIntervalInformationen 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 startSliderFunktion 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 clearIntervalMethode und verwenden unsere intervalVariable 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 startSliderFunktion starten oder neu starten .
    • Da unser Schieberegler gerade abgespielt wird, wird die Wiedergabetaste mit ausgeblendet $(this).hide();. Hinweis: Wir verwenden this, 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.