Sådan opbygges en billedskyder med jQuery

Denne vejledning leder dig gennem opbygning af et billedskyder ved hjælp af jQuery-biblioteket.

GIF viser Slider i aktion

Denne vejledning består af fire dele:

  • HTML
  • SCSS
  • JS
  • Referencer

HTML

Vi bruger Bootstrap til denne vejledning for at holde tingene flotte, uden at bruge meget tid.

Vores struktur vil være som følger:


    

    Inde i vores ulmed klassen af slidesvil vi have følgende:

  • Inde i vores .buttonsklasse skal du have følgende:

    Her er et eksempel på, hvordan du htmlskal se ud:

    Bemærk: Du skal erstatte srcbilledattributten med dit eget indhold.

    
        

    SCSS

    Vi bruger Sass og SCSS-syntaksen, så vi kan rede og bruge variabler

    : hjerte_dekoration:

    Vi kan bruge følgende SCSS til at definere vores styling:

    // 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

    Variabler

    I det følgende kodestykke definerer vi variabler, der bruges senere i vores kode.

    var animationSpeed = 1000; // How quickly the next slide animates. var pause = 3000; // The pause between each slide.

    Vi bruger en tom variabel, hvor vi kalder setIntervalmetoden:

    var interval;

    Animation Vi indpakker vores skyderanimationer i en funktion:

    function startSlider() {}

    Vi bruger den setInterval()oprindelige JavaScript-metode til at automatisere indholdet af funktionen på en tidsbaseret trigger.

    interval = setInterval(function() {}, pause);

    Vi bruger pausevariablen til at se, hvor mange millisekunder der skal ventes, før vi ringer til funktionen igen. Læs mere om den oprindelige setIntervalmetode her: //developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Inde i vores funktion bruger vi jQuery til at falme mellem dias ved hastigheden af ​​variationen animationSpeed:

    $('.slides > li:first') .fadeOut(animationSpeed) .next() .fadeIn(animationSpeed) .end() .appendTo('.slides');

    We are targeting the first slide using $('.slides > li:first'). - .fadeOut(animationSpeed) will fade the first slide out and then using .next(), we move to the next slide. - Once we have moved to the next slide, we will fade it in: .fadeIn(animationSpeed). - This sequence will continue until the last slide (.end()), then we stop the animation. We will now call the startSlider function to start the animation:

    startSlider();

    Play and Pause This feature is optional, but quite easy to implement. We will hide the play button, so we don’t see both the play and pause buttons:

    $('.play').hide(); // Hiding the play button.

    We will now create our pause button (automatically shown on page load):

    $('.pause').click(function() { clearInterval(interval); $(this).hide(); $('.play').show(); });

    We will call our function every time the pause button is clicked using jQuery. - We will remove the interval using the clearInterval method and using our interval variable as the parameter, indicating which interval to stop. - Because our slider is paused, we will hide the pause button using $(this).hide();. Note: we are using this, which will refer to what our parent is calling i.e. .pause. - We will then show our play button so the user can resume the animation: $('.play').show();. The following code sets up our play button (automatically hidden on page load):

    $(‘.play’).click(function() { startSlider(); $(this).hide(); $(‘.pause’).show(); });

    We will call our function every time the play button is clicked using jQuery.

    • We will start or restart the interval using the startSlider function.
    • Da vores skyder i øjeblikket spiller, skjuler vi afspilningsknappen ved hjælp af $(this).hide();. Bemærk: vi bruger this, som vil henvise til, hvad vores forældre kalder dvs. .play.
    • Vi vil derefter vise vores pause-knappen, så brugeren kan stoppe animationen efter behag: $('.pause').show();.

    Referencer

    • Tjek kildekoden og eksemplet på CodePen til denne vejledning.