Javascript slider - 2. rész - Automatikus működés

bytechadmin Nov 25, 2017 0

Az előző részben elkészítettünk egy nagyon egyszerű slidert, amelyben a navigációs gombokkal lehetett változtatni az aktuális slide-ot. Ez a funkció továbbra is megmarad, azonban elkészítjük az automatikus slide léptetést is. A léptetés 3 másodpercenként fogja módosítani az aktív slide-ot, de csak abban az esetben ha a kurzorunk aktuálisan nem a slider fölött található. Ehhez néhány nagyon egyszerű változtatást kell csak eszközölnünk. Ezen változtatások csak a javascript állományunkat érinti.

Akkor fogjunk is hozzá:

1.lépés - Változó létrehozása

Létre kell hoznunk egy változót, amelyben tárolni tudjuk hogy a kurzor aktuálisan a slider fölött van-e vagy sem.

var mouseOut = true;

Alapértékként a változónak true értéket adunk, ami azt mutatja hogy a kurzor jelenleg nincs a slider fölött.

2.lépés - Kurzor pozíció ellenőrzése

A kurzor pozíciójának lekérését a jQuery mouseover függvényével fogom elvégezni.

$("#simple-slider").mouseover(function() {
    mouseOut = false;
}).mouseout(function() {
    mouseOut = true;
});

3.lépés - A három másodperces léptetés beállítása

Ehhez nem kell mást tennünk, mint a setTimeOut használatával futtatjuk a Control függvényünket, abban az esetben ha a kurzor nincs a slider fölött.

var interval = setInterval(function(){
    if(mouseOut === true){
        Control('next');
    }
}, 3000);

Ezzel a néhány apró változtatással sikerült elérnünk, hogy a slider automatikusan tudjon lapozni a képek között. A teljes forrást letölthetitek innen. A következő részben a youtube videók beilleszthetőségét fogjuk elkészíteni.