Hogyan készítsünk képcsúszkát a jQuery segítségével

Ez az oktatóanyag végigvezeti a képcsúszka elkészítésén a jQuery könyvtár segítségével.

GIF, amely a csúszkát mutatja működés közben

Ez az oktatóanyag négy részből áll:

  • HTML
  • SCSS
  • JS
  • Hivatkozások

HTML

A Bootstrap-ot fogjuk használni ehhez az oktatóanyaghoz, hogy a dolgok jól látszódjanak, sok idő nélkül.

Szerkezetünk a következő lesz:

    Belül a ulaz osztály slidesmi lesz a következő:

  • Osztályunkon belül .buttonsa következőkre van szükséged:

    Íme egy példa arra, hogy hogyan htmlkell kinéznie:

    Megjegyzés: A képattribútumot cserélje srcle saját tartalmára.

    SCSS

    A Sass és az SCSS szintaxist használjuk, így fészkelhetjük és használhatjuk a változókat

    : szív_dekoráció:

    A stílusunk meghatározásához a következő SCSS-t használhatjuk:

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

    Változók

    A következő kódrészletben meghatározzuk a kódunkban később használt változókat.

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

    Egy üres változót fogunk használni, ahol a setIntervalmetódust hívjuk :

    var interval;

    Animáció Csúsztatható animációinkat egy funkcióba csomagoljuk:

    function startSlider() {}

    A setInterval()natív JavaScript-módszerrel automatizáljuk a függvény tartalmát egy időalapú eseményindítón.

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

    A pauseváltozó segítségével megtudhatjuk, hány ezredmásodpercig kell várni, mielőtt újra meghívnánk a függvényt. A natív setIntervalmódszerről itt olvashat bővebben : //developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval. Funkciónkban a jQuery-t használjuk a diák közötti eltűnésre az animationSpeed ​​változó sebességével:

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

    Az első diák használatával célozzuk meg $('.slides > li:first'). - .fadeOut(animationSpeed)elhalványítja az első diát, majd használva .next()a következő diára lépünk. - Ha már átkerült a következő diát, akkor elhalványul azt: .fadeIn(animationSpeed). - Ez a sorozat az utolsó diáig ( .end()) folytatódik , majd leállítjuk az animációt. Most hívjuk a startSliderfüggvényt az animáció elindításához:

    startSlider ();

    Lejátszás és szünet Ez a funkció opcionális, de meglehetősen könnyen megvalósítható. Elrejtjük a lejátszás gombot, így a lejátszás és a szünet gombokat sem látjuk:

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

    Most létrehozzuk a szünet gombunkat (automatikusan megjelenik az oldal betöltésekor):

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

    Minden alkalommal felhívjuk a funkciónkat, amikor a szünet gombra kattintunk a jQuery segítségével. - Eltávolítjuk az intervallumot a clearIntervalmódszerrel, és a intervalváltozónkat használjuk paraméterként, jelezve, hogy melyik intervallumot kell megállítani. - Mivel a csúszkánk szünetel, a szünet gombot elrejtjük $(this).hide();. Megjegyzés: használjuk this, amely arra utal, hogy a szüleink mit hívnak, azaz .pause. - Mi lesz akkor mutatni a lejátszás gombra, így a felhasználó újra az animáció: $('.play').show();. A következő kód állítja be a lejátszás gombunkat (automatikusan elrejtve az oldal betöltésekor):

    $ ('. play'). Kattintson (function () {startSlider (); $ (this) .hide (); $ ('. pause'). show ();});

    Minden alkalommal felhívjuk a funkciónkat, amikor a lejátszás gombra kattintunk a jQuery segítségével.

    • A startSliderfüggvény segítségével elindítjuk vagy újraindítjuk az intervallumot .
    • Mivel a csúszkánk éppen játszik, a lejátszás gombot elrejtjük $(this).hide();. Megjegyzés: használjuk this, amely arra utal, hogy a szüleink mit hívnak, azaz .play.
    • Mi lesz majd megmutatja a szünet gombot, így a felhasználó tudja megállítani az animáció tetszés: $('.pause').show();.

    Hivatkozások

    • Nézze meg ennek az oktatóanyagnak a CodePen forráskódját és példáját.