Posun v poli přes okraje

Při vytváření např. obrázkových galerií v JavaScriptu je často cílem dosáhnout zdánlivě nekonečné smyčky, kdy při kliknutí na „Další“ po posledním obrázku následuje obrázek první a naopak při kliknutí na „Předchozí“ se před prvním obrázkem objeví ten poslední.

Posun v rámci pole

Základ takového kódu může vypadat následovně:

var obrazky = document.querySelectorAll("#galerie img");
var pocetObrazku = obrazky.length;
var aktualniObrazek = 1;

Asi první řešení, co člověka napadne, je při změně hodnoty aktualniObrazek, kontrolovat, jestli není mimo rozsah.

  • není vyšší než počet obrázků (pocetObrazku),
  • není nižší než 1 (první obrázek)

Jde proto použít obyčejné if podmínky ve stylu:

aktualniObrazek = aktualniObrazek + posun;
if (aktualniObrazek > pocetObrazku) {
  aktualniObrazek = 1;
}
else if (aktualniObrazek < 1) {
  aktualniObrazek = pocetObrazku;
}

V proměnné posun bude hodnota 1 pro posun dopředu a -1 pro posun v zpátky.

Živá ukázka

Posun o více než 1

Pokud je potřebné se v poli posouvat o více než jednu položku, bylo by původní řešení složitě rozšiřitelné. Bude tedy lepší vymyslet něco jiného.

Modulo

Šikovná funkce je pro tento případ modulo, které vrátí celočíselný zbytek po dělení. V JS se zapisuje znakem procenta %.

10 % 3 = 1
7 % 4 = 3
10 % 5 = 0

Pro posun po poli tedy stačí sečíst pocetObrazku + aktualniObrazek + posun a zjistit zbytek po vydělení hodnotou pocetObrazku.

aktualniObrazek = 
  (pocetObrazku + aktualniObrazek + posun) % pocetObrazku;

Když bude celkem 5 obrázků, aktuální bude 4 a cíl je se posunout o 2 dopředu:

5 + 4 + 2 = 11
11 % 5 = 1

Výsledek tak bude obrázek 1.

Pro případy, že by záporný posun byl větší než pocetObrazku, je vhodné aplikovat „% (modulo) pocetObrazku“ i na posun.

aktualniObrazek = (
  pocetObrazku + aktualniObrazek + (posun % pocetObrazku)
) % pocetObrazku;

Živá ukázka

Číslování indexů

Při používání číselných indexů je nutné dbát na to, že bývají číslovány od nuly. Naopak živý člověk bude preferovat číslování od jedničky.

Čísla indexů vytvářejí trochu záludnou situaci, kdy počet prvků (polozky.length) bude třeba 5, ale nejvyšší index 4.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Fixní postranní panel

Jak vytvořit fixovaný banner?

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Aktivování/deaktivování okna

Zachycení aktivování a deaktivování okna v JS

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Test existence obrázku JavaScriptem

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře