Vytvorte krásny posúvač obsahu. Vytvorenie posúvača JavaScriptu vlastnými rukami

> >

Štýly posúvača

.slider-box (šírka: 320px; výška: 210px; pretečenie: skryté;) .slider (pozícia: relatívna; šírka: 10000px; výška: 210px;) .slider img (plávajúci: vľavo; z-index: 0;)

Kontajner.slider-box nastavuje rozmery posúvača. Vlastnosť overflow: hidden skryje všetky prvky, ktoré nespadajú do oblasti vnútri prvku.

Zásobník posúvača je nastavený na veľkú šírku. Je to potrebné, aby sa do nej zmestili všetky sklíčka.

Snímky sú zarovnané pomocou vlastnosti float: left.

Nižšie je schematické rozloženie posuvných blokov.

Skript

Pohyb snímok sa vykoná plynulou zmenou vlastnosti posúvača okraja vľavo v kontajneri.

$ (funkcia () (var width = $ (. slider-box") .width (); // Šírka posúvača. interval = 4000; // Interval výmeny snímok.$ (". slider img: last") .klon () .prependTo (.slider"); // Kópia poslednej snímky sa umiestni na začiatok.$ () .eq (1) .klon () .appendTo (.posuvník"); // Kópia prvej snímky sa umiestni na koniec. // Kontajner.slider je posunutý o jednu šírku snímky doľava. setInterval ("animácia ()", interval); // Na zmenu snímok sa spustí funkcia animácie ().)); animácia funkcie () (var margin = parseInt ($ (. posuvník") .css ("marginLeft")); // Aktuálny posun blokušírka = $ (. posuvné pole") .width (), // Šírka posúvača. slidersAmount = $ (. slider") .deti () .dĺžka; // Počet snímok v posúvači. if (margin! = (- width * (slidersAmount- 1))) // Ak aktuálna snímka nie je posledná,(margin = okraj- sirka; // potom sa hodnota okraja zníži o šírku snímky.) inak ( // Ak sa zobrazí posledná snímka,$ (. posuvník") .css ("ľavý okraj", - šírka); // potom sa posuvný blok vráti do svojej východiskovej polohy, okraj = - šírka * 2; ) $ (. posuvník") .animate ((okrajLeft: okraj), 1000); // Blok posuvníka sa posunie doľava o 1 snímku. } ;

Výsledkom je jednoduchý posuvník s nekonečným automatickým posúvaním.

Ale keďže s vami diskutujeme o základoch JS, na preštudovanie základu popíšem, ako vytvoriť jednoduchý posuvník iba pomocou JavaScriptu. No, poďme k rozboru materiálu!

Aké typy posuvníkov existujú a kde by ste ich mohli potrebovať?

Vytvorenie pohodlných galérií na prezeranie obrázkov je potrebné na všetkých webových službách, kde sú aspoň nejaké fotografie. Môže ísť o internetové obchody, portfóliové stránky, spravodajské a vzdelávacie služby, webové stránky firiem a zábavných podnikov s fotoreportážami a pod.

Toto je však bežné použitie posúvačov. Podobné technológie sa používajú aj na prilákanie zákazníkov na propagačné produkty, služby alebo na popis výhod podnikov.

V zásade ju zákazníci žiadajú implementovať na galériu typu "Carousel". Ide o praktický nástroj na prezeranie obrázkov vo veľkých rozmeroch s možnosťou prepínania medzi snímkami tam a späť používateľom. V tomto prípade sa samotné obrázky zvyčajne po určitom čase automaticky prepnú. Tento mechanizmus dostal prezývku vďaka tomu, že zobrazovanie obrázkov sa opakuje v kruhu.

Dnes, ak je to potrebné, na internete nájdete najneobvyklejšie a najatraktívnejšie doplnky na prezeranie súboru fotografií.

Samostatná činnosť

Teraz začnime vytvárať vlastný posuvník. V tomto bode vašej krivky učenia vám navrhujem, aby ste ho implementovali pomocou pure. Tým sa automaticky prepínajú obrázky v kruhu.

Nižšie prikladám programový kód mojej aplikácie. Cestou som vám nechal komentáre.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

• 
• 
• 

Dúfam, že ste sa nestretli s problémami s css a html kódom. Ale považujem za potrebné rozobrať prácu scenára. Preto prejdime k dešifrovaniu napísaného.

Takže najprv pomocou metódy querySelectorAll premenlivý MySlider Priradím zoznam všetkých prvkov v uvedenom rozsahu. Označuje tento záznam

document.querySelectorAll („#slides .slide“)

Teda v MySlider je uložená zbierka štyroch prvkov.

Ďalej som priradením k premennej nastavil, ktorý obrázok sa má začať zobrazovať aktuálny obrázok nula. Potom, čo označím, že zmena snímok nastane za 2,7 sekundy a mala by byť vyvolaná funkcia spracovania nextSlide.

Prejdime k samotnej funkcii.

Spočiatku pre aktuálny prvok zoznamu mením popis tried, t.j. prepisovanie" šmykľavkazobrazujúci"zapnuté" šmykľavka". Obraz sa tak stane neviditeľným.

Teraz definujem novú kolekciu, ktorá sa zobrazí na obrazovke. K tomu beriem aktuálnu pozíciu +1. Možno ste si všimli, že používam aj delenie zvyšku (%) počtom snímok, ktoré mám. Tento trik s ušami je potrebný na začatie show v novom kruhu. Takto to bude doslova vyzerať:

Ale teraz priradím popis tried k výslednému prvku " šmykľavkazobrazujúci". Ako vidíte, všetko sa dá ľahko implementovať.

ďakujem za pozornosť. Nezabudnite sa pripojiť k skupine mojich odberateľov, čítať nové články a samozrejme zdieľať odkazy na svoje obľúbené publikácie so svojimi priateľmi. Veľa šťastia pri učení JavaScriptu. Čau Čau!

S pozdravom Roman Chueshov

Čítať: 256-krát

Jednou z najväčších výziev, ktorým v súčasnosti čelí západná civilizácia, je spôsob zobrazenia veľkého množstva obsahu na malom priestore.

Jedným efektívnym riešením je umiestniť obsah do sekvenčných blokov pomocou toho, čo je v tomto odvetví známe ( a v online komunite) nazývaný posúvač obsahu. Možno ste o ňom ešte nepočuli, ale stavím sa, že ste ho určite mali vidieť.

Aby ste si osviežili pamäť a získali predstavu o tom, čo budeme vytvárať, nižšie je príklad posúvača obsahu:

V tomto článku vám ukážem, ako si vytvoriť svoj vlastný krásny posúvač obsahu, ktorý sa veľmi podobá tomuto. Okrem samotného vytvárania posúvača obsahu sa dozviete veľa o tom, ako HTML, CSS a JavaScript interagujú pri vytváraní takéhoto prvku. Vo všeobecnosti na vás čaká veľa nových vecí, takže začnime.

Prehľad, ako to funguje

Predtým, ako sa bezhlavo vrhneme do HTML, CSS a JavaScriptu, ktoré budú potrebné na to, aby to všetko fungovalo, urobme malý krok späť a pochopme prvky, ktoré tvoria náš posúvač obsahu.

Najprv máme obsah, ktorý chceme vložiť do posúvača:

Obsah môže byť čokoľvek, čo chcete. Môžu to byť obrázky, štandardný obsah HTML, kombinácia viacerých typov obsahu atď. Je to vlastne jedno. Ak sa náš obsah dá zabaliť do prvkov DIV, je to v poriadku. Musíte sa len uistiť, že každý blok obsahu má rovnakú šírku a výšku.

Pri zobrazení posúvača vidíte naraz iba jeden blok obsahu. Ak neurobíte ďalšie kroky, obsah zobrazený súčasne v pôvodnej veľkosti môže premeniť posuvník na niečo veľmi vizuálne neatraktívne.

Opravíme to v dvoch krokoch. Najprv zabalíme obsah do kontajnera, ktorý má rovnakú veľkosť ako jeden z blokov obsahu:

Po zabalení obsahu do kontajnera orežeme všetky prvky okolo bloku obsahu, aby sme zabezpečili, že sa súčasne zobrazí iba jeden blok:

Ďalším krokom je možnosť zobraziť zvyšok obsahu. Dá sa to urobiť rôznymi spôsobmi. V tomto článku používame súbor kruhových odkazov, na ktoré môžete kliknúť:

Posledná vec, ktorú musíte urobiť, aby posuvník fungoval, je zabezpečiť kliknutie na každý odkaz. To si bude vyžadovať nejaké triky CSS spolu s JavaScriptom, ale nič príliš zložité. A toto, milí priatelia a nepriatelia, a celý stručný prehľad toho, z čoho sa skladá posuvník obsahu.

V niekoľkých nasledujúcich častiach sa pozrieme na skutočné kódy HTML, CSS a JavaScript, ktoré budú poháňať náš posúvač.

Obsah

Postupujte podľa tých istých krokov, ktoré sme prebrali v rýchlom prehľade a začnime s ... obsahom. Najprv musíme vytvoriť východiskový bod. Vytvorme prázdny dokument HTML a pridáme doň nasledujúci kód zo štartovacej HTML5 šablóny:

Toto označenie nerobí nič iné, len definuje štruktúru dokumentu, ale je to prvý krok k ďalšiemu pridávaniu nášho obsahu. Urobme to v ďalšej časti.

obsah ( tentoraz skutočné)

Do prvku body pridajte nasledujúci kód HTML:

Medzi značky štýlu pridajte nasledujúce pravidlá štýlu, ktoré definujú tvar a farbu nášho obsahu:

#wrapper (šírka: 2200px; pozícia: relatívna; vľavo: 0px;) .content (pohyblivý: vľavo; šírka: 550px; výška: 350px; white-space: normal; background-repeat: no-repeat;) #itemOne (pozadie -color: # ADFF2F; background-image: url ("http://www.kirupa.com/images/blueSquare.png");) #itemTwo (background-color: # FF7F50; background-image: url ("http : //www.kirupa.com/images/yellowSquare.png ");) #itemThree (farba pozadia: # 1E90FF; obrázok pozadia: url (" http://www.kirupa.com/images/pinkSquare.png ");) #itemFour (farba pozadia: # DC143C; obrázok pozadia: url (" http://www.kirupa.com/images/graySquare.png ");)

Teraz, keď si prezeráte stránku, uvidíte niečo podobné tomu, čo je zobrazené na snímke obrazovky:

Uvidíte štyri veľké obdĺžnikové bloky usporiadané úhľadne vedľa seba. V závislosti od rozlíšenia obrazovky a veľkosti okna prehliadača sa možno budete musieť posunúť trochu doprava alebo doľava, aby ste videli všetky obdĺžniky.

Teraz venujte trochu pozornosti a pokúste sa pochopiť, prečo vidíte to, čo vidíte. Skontrolujte označenie HTML a ponorte sa do prvkov, ktoré sú vo vašom dokumente.

Venujte pozornosť hodnotám class a id, ktoré sa v ňom používajú, pretože sa budú riadiť pravidlami štýlu, ktorý ste pridali. Pozrite sa na pravidlá štýlu a ako ich vykreslenie ovplyvňuje výsledok. Teraz si to všetko zrekapitulujeme.

Čo sme urobili?

V našom značkovaní HTML sa obsah, ktorý vidíte, skladá zo štyroch prvkov div, z ktorých každý obsahuje hodnotu z triedy obsahu. Táto hodnota triedy pochádza z pravidla štýlu .content, ktoré určuje veľkosť každého bloku: šírka 550 pixelov a výška 350 pixelov:

Obsah (plávajúci: vľavo; šírka: 550 pixelov; výška: 350 pixelov; medzera: normálne; opakovanie na pozadí: bez opakovania;)

Pravidlo štýlu .content tiež nastavuje plávajúce písmeno doľava. To spôsobí, že sa divs zoradia. Posledná vec, ktorú toto pravidlo štýlu deklaruje, je vlastnosť white-space. Táto vlastnosť určuje, ako bude text v odseku zalomený.

Túto vlastnosť som použil len pre pohodlie. Ak sa rozhodnete ísť nad rámec tohto článku a pridať obsah pre každý z divov, budete mi vďační, pretože váš text bude vhodne zalomený, alebo túto vlastnosť odstránite ( alebo ho nastavte na inú hodnotu), ak to nechcete vidieť.

V tomto bode bol náš prvok div správne dimenzovaný a usporiadaný. Je škoda, že je úplne neviditeľný:

Aby sme tento problém vyriešili, priradíme každému divu jedinečné ID prostredníctvom hodnôt id: itemOne, itemTwo, itemThree, anditemFour. V sekcii štýlov máme štyri pravidlá štýlu, ktoré zodpovedajú týmto hodnotám id:

#itemOne (color-background: # 0099CC; background-image: url ("http://www.kirupa.com/images/blueSquare.png");) #itemTwo (background-color: # FFCC00; background-image: url ("http://www.kirupa.com/images/yellowSquare.png");) #itemThree (farba pozadia: # FF6666; obrázok pozadia: url ("http://www.kirupa.com/images /pinkSquare.png ");) #itemFour (farba pozadia: # E8E8E8; obrázok pozadia: url (" http://www.kirupa.com/images/graySquare.png ");)

Ako vidíte, tieto pravidlá štýlu definujú iba farbu pozadia a obrázok pozadia pre náš obsah. Odteraz už nie sú divy neviditeľné. Sú zobrazené ako obdĺžniky rôznych farieb s veľkosťou 550 x 350 pixelov.

Už sme skoro hotoví. Posledná vec, na ktorú sa pozrieme, je tajomný div, ktorý obsahuje ID obalu:

Tento prvok zabalí všetok náš obsah do jedného kontajnera. Toto nie je kontajner, ktorý som mal na mysli v recenzii, keď som hovoril o orezaní všetkého obsahu okolo blokov obsahu.

Tento kontajner je určený na trochu iné veci. Doslova len zabalí obsah, aby sme si ho mohli pozrieť celý.

Zodpovedajúce pravidlo štýlu #wrapper vykonáva túto úlohu:

#wrapper (šírka: 2200px; pozícia: relatívna; vľavo: 0px;)

Po prvé, toto pravidlo štýlu určuje šírku prvku obálky na 2200 pixelov. To znamená, že celková šírka nášho obsahu ... ktorú získate vynásobením 4 ( podľa počtu divs) o 550 pixelov.

Vlastnosti position a left sú určené na nastavenie možnosti presunúť kontajner kamkoľvek chceme. Nastavením vlastnosti position na relatívnu odstránime tento prvok zo štandardnej štruktúry dokumentu a umožníme ho umiestniť kdekoľvek pomocou hodnôt pixelov relatívne k tomu, kde sa práve nachádza.

Keďže naše prvky div s obsahom sú potomkami tohto prvku div, vytiahnu sa na miesto, kde je umiestnený nadradený prvok div. Ako si viete predstaviť, je to veľmi pohodlné!

Orezanie obsahu

V predchádzajúcej časti sme sa postarali o zobrazenie blokov obsahu. Ďalšia vec, ktorú urobíme, je orezať náš obsah tak, aby bol súčasne viditeľný iba jeden posuvný blok.

Tu potrebujeme hlavnú nádobu. Zabaľte všetky svoje prvky div HTML do prvku div s ID contentContainer:

Stačí pridať dva nové riadky a ak chcete, odsadené riadky, ktoré slúžia len na úpravu štýlu HTML kódu tak, ako vyzerá.

Ak si práve teraz prezeráte náš zabalený (opäť) obsah, nič nové neuvidíte. Len zbalenie prvkov do iného divu nič moc neurobí, tým menej nič, čo chceme urobiť, aby sme orezali obsah.

Ak chcete pridať túto zmysluplnú akciu, vytvorte nasledujúce pravidlo #contentKontajnerového štýlu:

#contentContainer (šírka: 550px; výška: 350px; orámovanie: 5px čierna plná; pretečenie: skryté;)

Všimnite si, že nastavujete veľkosť prvku contentContainer na 550 pixelov x 350 pixelov. To znamená presne rovnakú veľkosť ako každý z blokov obsahu. Aby posuvník trochu vynikol, nastavili sme ho na 5px čierny okraj.

Posledná vec, ktorú urobíme, je orezanie obsahu nastavením vlastnosti overflow na skryté. Toto má skryť všetko mimo contentContainer.

Všetko spolu nám dáva nasledujúci obrázok v prehliadači:

Všimnite si, že teraz je viditeľný iba obsah vášho prvého bloku. Zvyšok obsahu stále existuje, len je teraz skrytý kvôli nášmu orezaniu skrytej hodnoty vlastnosti overflow.

Navigačné odkazy

Tak sme sa k nim dostali! Blížime sa k získaniu plne funkčného posúvača. V tejto časti sa budeme zaoberať navigačnými odkazmi – prvkami, na ktoré kliknete, aby ste videli ďalšie bloky obsahu.

Tieto odkazy nemajú nič spoločné s naším contentContainerom ani inou časťou HTML, ktorú už máme. Zvýraznené riadky musíte pridať do kódu HTML, ktorý už máme (ale nad značku skriptu):

Poďme sa rýchlo pozrieť na kód HTML, ktorý ste práve pridali. Najprv máme div s názvom navLinks, ktorý popisuje neusporiadaný zoznam. Samotné odkazy sú prezentované ako položky zoznamu.

Každá položka zoznamu obsahuje hodnotu z triedy itemLinks, ako aj vlastný atribút data- * s názvom data-pos. K tomuto atribútu sa vrátime trochu neskôr, ale zatiaľ si všimnite, že existuje.

Potrebujeme upraviť štýl HTML, ktorý sme práve pridali. V sekcii štýlov pridajte nasledujúce pravidlá:

#navLinks (text-align: center; width: 550px;) #navLinks ul (okraj: 0px; padding: 0px; display: inline-block; margin-top: 6px;) #navLinks ul li (float: left; text- zarovnanie: stred; okraj: 10 pixelov; štýl zoznamu: žiadny; kurzor: ukazovateľ; farba pozadia: #CCCCCC; odsadenie: 5 pixelov; polomer okraja: 50 %; okraj: čierny 5 pixelov;) #navLinks ul li: hover ( background-color: # FFFF00;) #navLinks ul li.active (background-color: # 333333; color: #FFFFFF; outline-width: 7px;) #navLinks ul li.active: hover (background-color: # 484848; farba: #FFFFFF ;)

Wow, koľko CSS. Napriek tomu, že existuje veľa kódu, nie je na ňom nič skutočne jedinečné alebo zaujímavé. Časť kódu CSS vytvára horizontálne menu s odkazmi zobrazenými vedľa seba.

Zvyšok kódu určuje vzhľad každého odkazu, ako aj zodpovedajúci výber pri umiestnení kurzora myši.
Stále stojí za to venovať sa jednému bodu podrobnejšie.

Je to kvôli dvom pravidlám štýlu, ktoré platia pre aktívnu triedu:

#navLinks ul li.active (farba pozadia: # 333333; farba: #FFFFFF; obrysová šírka: 7px;) #navLinks ul li.active: hover (farba pozadia: # 484848; farba: #FFFFFF;)

Ak si pamätáte, v našom kóde HTML nebol žiadny prvok, ktorý by mal hodnotu aktívnej triedy. Bez ohľadu na to sa tieto pravidlá štýlu budú naďalej uplatňovať, pretože aktívna trieda sa pridáva dynamicky jedným z našich odkazov.

Ak máte teraz problém to všetko zistiť, nebojte sa, čoskoro sa na to pozrieme podrobne.

Momentálne náš posúvač vyzerá takto:

Ak váš posuvník nevyzerá správne, potom je vysoká pravdepodobnosť, že ste urobili preklep ... alebo niečo iné. Stalo sa to?

Vytvorenie samotného posúvača

Dobre, zatiaľ tu máme niečo, čo vyzerá ako funkčný posúvač. Keď však kliknete na ktorýkoľvek z odkazov, nestane sa absolútne nič.

Teraz si vytvoríme funkčný slider, ale ešte predtým pridáme JavaScript a niekoľko skvelých prvkov ... menovite pekné prechody CSS.

Pridanie JavaScriptu

Do značky skriptu pridajte nasledujúce riadky kódu JavaScript:

// len sa pýtam na DOM ... ako keby som požiadal šéfa o povolenie! var links = document.querySelectorAll (. itemLinks"); var wrapper = document.querySelector ("# wrapper"); // activeLink poskytuje označenie pre aktívny prvok var activeLink = 0; // nastavenie sledovania udalostí pre (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); // определяем элемент для activeLink link.itemID = i; } // устанавливаем первый элемент в качестве активного links.classList.add("active"); < links.length; i++) { links[i].classList.remove("active"); } } // Обработчик изменяет позицию слайдера, после того, как мы убедились, // что в качестве активной обозначена нужная нам ссылка. function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }

Všetko, čo musíme urobiť, je poskytnúť plynulý prechod namiesto náhlych zmien snímok.

Pridanie prechodu

V súčasnosti máme posuvník obsahu, ktorý zatiaľ obsah neposúva plynulo. Namiesto toho slajdy prudko preskakujú z jedného na druhý. Aby bolo posúvanie obsahu plynulé, použijeme prechod CSS. Pridajme do nášho posúvača jeden z možných prechodov.

Nájdite pravidlo štýlu #wrapper a pridajte k nemu jeden riadok:

Čiara, ktorú ste pridali, definuje prechod. Vlastnosť v ňom uvedená určuje, že prechod by sa mal uskutočniť pri zmene vlastnosti vľavo. Náš prechod bude trvať 0,5 sekundy a na zrýchlenie prechodu na začiatku prechodu a spomalenie na jeho konci použije funkciu načasovania prechodu.

Keďže vlastnosť prechodu stále prechádza určitými zmenami vo W3C, budete musieť použiť predpony, aby ste zabezpečili, že prechod bude môcť použiť každý moderný prehliadač. Ak sa tým nechcete zaoberať, pridajte nasledujúci skript tesne pred značku skriptu:

Nie, tento skript nerobí nič škodlivé. Toto je hosťovaná verzia Knižnice Lei Veru -bez predpony... Aby ste sa nedozvedeli veľa všetkého o tom, ako fungujú posuvníky, môžete si tiež stiahnuť jej skript, nahrať ho na svoj vlastný server a prepojiť s vlastnou verziou.

V každom prípade, ak si dokument práve prezeráte, mali by ste mať funkčný posúvač obsahu, ktorý hladko zobrazí obsah, keď kliknete na ktorýkoľvek z navigačných odkazov. Malo by to byť totožné s tým, čo ste videli v príklade uverejnenom na samom začiatku tohto článku.

Konečne!!!

Analýza kódu (a všetko ostatné!)

Teraz, keď máme funkčný posúvač obsahu, skúsme od začiatku zistiť, ako to kód spája.

Čo sa naozaj deje

Po načítaní posúvača obsahu môžete vidieť, ako sa zobrazuje prvý blok obsahu. Zvyšok obsahu je orezaný a skrytý:

Kliknutím na ktorýkoľvek odkaz sa zobrazí príslušný blok obsahu. Posuvník vie, ktorá časť obsahu sa musí zobraziť vo viditeľnej oblasti kvôli úzkemu vzťahu medzi každým navigačným odkazom a pozíciou v pixeloch každého bloku obsahu.

Pokúsme sa pochopiť túto súvislosť. Je niekoľko vecí, ktoré vieme. Vieme, že každý z našich blokov obsahu má šírku 550 pixelov. Vieme tiež, že náš prvý blok obsahu je nastavený horizontálne na 0 pixelov.

Ako to vieme? Všetky naše bloky obsahu sú zabalené do prvku obalu, ktorý pokrýva celý náš obsah, a ľavý okraj prvku obalu má veľkosť 0 pixelov:

Toto je deklarované v pravidle štýlu #wrapper. Z tohto pravidla štýlu tiež vieme, že všetky bloky obsahu sú posunuté doľava a usporiadané v rade za sebou.

Keď to vieme, môžeme vypočítať pozície pre všetky bloky obsahu takto:

Prvý blok sa nachádza v bode 0 pixelov. Šírka prvého bloku obsahu je pozíciou druhého bloku. To je 550 pixelov. Každý nasledujúci blok má pozíciu o 550 pixelov väčšiu ako predchádzajúci.

Keďže poznáme presnú polohu pixelov každého bloku obsahu, môžeme tieto informácie použiť na to, aby sme posuvníku obsahu prikázali presunúť prvok obalu na požadované miesto, aby bola viditeľná časť obsahu, ktorú chceme.

Data-pos!

Skvelé, teraz poznáme pozície všetkých blokov obsahu. Zatiaľ sme neuvažovali o tom, ako nám poznanie polohy bloku obsahu v pixeloch pomôže zobraziť požadovaný blok v okne posuvníka.

Ako môžeme naznačiť, že po kliknutí na odkaz by sa mal zobraziť konkrétny blok obsahu? Len. Každý odkaz obsahuje presnú polohu (v pixeloch) bloku obsahu, ktorému zodpovedá:

Všimnite si, že atribút data-pos ukazuje každý z odkazov na hodnotu každého z atribútov data-pos. Rovnajú sa zápornej hodnote pôvodnej horizontálnej polohy každého z blokov obsahu.

Keď klikneme na odkaz, JavaScript sa použije na prečítanie atribútu data-pos priradeného k tomuto odkazu a potom sa prepne hodnota pozície pixelu pre náš obalový prvok na hodnotu, ktorá bola načítaná z atribútu.

Tu je napríklad to, čo sa stane po kliknutí na tretí odkaz:

Tretí odkaz má hodnotu dátovej pozície 1100 pixelov. To zodpovedá tomu, o koľko pixelov je potrebné presunúť obal kontajnera, aby sa tretí blok obsahu objavil vo viditeľnej oblasti. Kliknutím na akýkoľvek iný odkaz sa vlastnosť prvku obalu nastaví na hodnotu obsiahnutú v atribúte data-pos daného odkazu.

Dobre, prišli sme na vzťah medzi odkazmi a pozíciou obsahu, o ktorej som hovoril predtým. Teraz musíme zvážiť JavaScript, ktorý prevedie všetko, o čom som písal v tejto časti, na niečo, čomu bude prehliadač rozumieť.

Je to všetko o JavaScripte

Keďže teraz koncepčne rozumiete tomu, ako všetko funguje v našom posúvači obsahu, pozrime sa na JavaScript, ktorý implementuje všetko, čo poznáte. Ako to robím vo všetkých svojich článkoch, poďme rozobrať každý riadok JavaScriptu a uvidíme, čo robí pre náš posúvač.

Začnime úplne hore:

var links = document.querySelectorAll (. itemLinks"); var wrapper = document.querySelector ("# wrapper");

Premenná links berie množinu všetkých prvkov v našom dokumente, ktoré majú hodnotu v triede itemLinks. Tieto položky sú položky zoznamu, ktoré fungujú ako navigačné prepojenia. Premenná wrapper je veľmi podobná odkazom. Vyžaduje to ukazovateľ na obal.

querySelector a querySelectorAll

Všimnite si, ako sa pýtam na DOM. Namiesto použitia niečoho ako getElementsByClassName alebo getElementById používam nové funkcie querySelectorAll a querySelector.

Uvidíte, že obe tieto premenné budeme používať neskôr, takže si ich pamätajte.

var activeLink = 0;

Premenná activeLink sa používa na uloženie polohy aktuálne zobrazeného obsahu. Význam tejto premennej lepšie pochopíte, keď ju o niečo neskôr vysvetlím v praxi.

Ďalšia sada riadkov je cyklus for:

// nastavenie sledovania udalostí pre (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }

Tu iterujeme každý prvok premenných odkazov a priradíme mu sledovanie udalostí. Tento nástroj na sledovanie udalostí zavolá funkciu setClickedItem, keď sa zaznamená udalosť kliknutia.

Nasledujúci riadok spôsobí celý rad zmien:

// nastavíme prvú položku ako aktívnu links.classList.add ("aktívne");

Hodnotu aktívnej triedy pridáme k prvému prvku navigačného prepojenia. To sa dosiahne odovzdaním hodnoty activeLink do poľa odkazov. Keďže activeLink je 0, pole zvyčajne prevezme prvý prvok a pomocou rozhrania classList API pridá hodnotu do aktívnej triedy.

Pamätáte si, že po vykonaní tohto riadku kódu sme sa pozreli na nasledujúce pravidlá štýlu?

Teraz tieto pravidlá štýlu nadobudnú účinnosť a pomôžu aktívnemu navigačnému odkazu vyniknúť zo zoznamu ostatných neaktívnych odkazov. K týmto pravidlám štýlu sa vrátime trochu neskôr a pozrieme sa na ne podrobnejšie.

Ďalšia vec, na ktorú sa pozrieme, je obslužný program udalosti setClickedItem, ktorý sa volá po kliknutí na niektorý z odkazov:

function setClickedItem (e) (removeActiveLinks (); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition (clickedLink);)

Táto funkcia najskôr prepne stav všetkých vašich odkazov na neaktívne volaním removeActiveLinks. Na túto funkciu sa pozrieme o niečo neskôr.

Ďalšou dôležitou vecou, ​​ktorú táto funkcia robí, je, že mení hodnotu vlastnosti itemID vybranej položky na activeLink. To zaisťuje, že activeLink vždy ukazuje na číslo, ktoré zodpovedá bloku obsahu, ktorý je aktuálne zobrazený na posúvači.

Po vykonaní týchto dvoch ( skôr nudné) akcie, táto funkcia odovzdá odkaz na vybranú položku funkcii changePosition. Čo zase robí pár úžasných vecí, o ktorých budem diskutovať v nasledujúcom odseku.

Tu sa odohrávajú zaujímavé zmeny! Poďme trochu dopredu a pozrime sa na funkciu changePosition:

// Obslužný program zmení polohu posúvača po tom, ako sa ubezpečíme, // že odkaz, ktorý potrebujeme, je vybratý ako aktívny. function changePosition (link) (link.classList.add ("aktívne"); var position = link.getAttribute ("data-pos"); wrapper.style.left = position;)

Táto funkcia robí dve veci:
І. Prepína vizuálne zobrazenie vybratého odkazu, aby naznačilo, že je momentálne aktívne.
II. Nastavuje polohu prvku obalu.

Poďme sa na tieto dve veci pozrieť bližšie.

Prepnutie vizuálneho zobrazenia vybraného / aktívneho odkazu

Aby bolo pre vás jasnejšie, o čom som hovoril predtým, vaše navigačné odkazy môžu byť v jednom z dvoch stavov. Tieto stavy sú pre používateľa, aby videl, ktorý blok obsahu je momentálne aktívny:

Na tomto obrázku môžete okamžite určiť, že blok obsahu zodpovedajúci štvrtému odkazu je momentálne aktívny a prvé tri odkazy sú neaktívne.

Táto vizuálna zmena sa dosiahne pridaním a odstránením tried CSS. Aktívna trieda sa pridá k aktívnemu odkazu. Všetky odkazy, ktoré nie sú aktívne, neobsahujú hodnotu aktívnej triedy. Ako to funguje, pochopíte, keď sa pozrieme na funkciu removeActiveLinks.

V každom prípade si pamätáte, že predtým sme nazvali nasledujúce dve pravidlá štýlu:

#navLinks ul li.active (farba pozadia: # 333333; farba: #FFFFFF; obrysová šírka: 7px;) #navLinks ul li.active: hover (farba pozadia: # 484848; farba: #FFFFFF;)

V našom setClickedItem ( tiež známa ako funkcia, ktorá sa zavolá v dôsledku kliknutia na odkaz), najprv voláme removeActiveLinks:

function setClickedItem (e) (removeActiveLinks (); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition (clickedLink);)

Táto funkcia je zodpovedná za odstránenie aktívnej triedy pre všetky navigačné odkazy:

funkcia removeActiveLinks () (pre (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Môžete si to predstaviť ako globálne resetovacie tlačidlo. Iteruje cez navigačné odkazy, ktoré sú uložené v premennej odkazu a odstraňuje hodnotu aktívnej triedy pomocou classList.remove (). Len majte na pamäti, že ak niektorý z navigačných odkazov obsahoval hodnotu aktívnej triedy, dobre ... už tam nebude.

Preto sme sa zaoberali tým, ako odstrániť aktívnu triedu zo všetkých vašich odkazov. Pridanie triedy je zase veľmi jednoduché:

funkcia removeActiveLinks () (pre (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Rovnaký zoznam tried, ktorý sme predtým použili na odstránenie hodnoty aktívnej triedy, používame na pridanie hodnôt aktívnej triedy späť k vybranému odkazu. Tento vybratý odkaz dostane argument odkazu, ktorý sa mu odovzdá.

Nastavenie polohy škrupiny

Už sme skoro hotoví! Po všetkých týchto krokoch sa konečne dostaneme k funkcii changePosition, ktorá vlastne nastaví polohu shell prvku posuvníka a zobrazí blok obsahu zodpovedajúci vami vybranému odkazu.

Pozrime sa na nasledujúci úryvok:

function changePosition (link) (link.classList.add ("aktívne"); var position = link.getAttribute ("data-pos"); wrapper.style.left = position;)

Premenná position uchováva hodnotu atribútu data-pos odkazu, na ktorý sme klikli. Po získaní hodnoty atribútu data-pos nastavíme vlastnosť CSS left prvku wrapper na rovnakú hodnotu.

Ako to súvisí s implementáciou posuvného efektu? Pamätáte si, že sme pred časom pridali jedno pravidlo do štýlu #wrapper?

#wrapper (šírka: 2200px; pozícia: relatívna; ľavá: 0px; prechod: doľava 0,5s uvoľnenie von;)

Všimnite si, že sme definovali prechod, ktorý sa prejaví, keď sa zmení ľavá vlastnosť. Hádajte, čo robí náš JavaScript? Nastaví nehnuteľnosť doľava! Prechod CSS zistí túto zmenu a spustí pohyb obsahu. Všetko, čo musíte urobiť, aby to všetko fungovalo, je pridať jeden riadok JavaScriptu.

Neviem ako vy, ale pre mňa je to jednoducho úžasné. To je niečo, čo sme si pred pár rokmi nevedeli predstaviť, keď sme museli vynaložiť veľké úsilie a písať kód, aby sme zvládli posuvný efekt. Vďaka tomu je náš posúvač obsahu krásny.

Len tak sme vytvorili posúvač obsahu od nuly a (čo je dôležitejšie) sme sa naučili, ako to funguje.

Posuvník na zlepšenie obsahu

Posuvník obsahu, ktorý sme práve vytvorili, je celkom cool, ale môžete ho urobiť ešte chladnejším. V tejto časti sa pozrieme na dve vylepšenia, ktoré by ste mohli považovať za veľmi užitočné. Popri tom sa naučíme niekoľko nových trikov s JavaScriptom a CSS. Bude to, ako teraz mladí ľudia hovoria: "Plačem!"

Rolovanie pomocou translate3d transformácie

V tomto bode sa naše snímky posúvajú zmenou hodnoty vlastnosti CSS left, ktorá je aplikovaná na element wrapper div. Použitím vlastnosti left sfunkčníme posuvník, avšak táto metóda má vážne nevýhody. Na zabezpečenie plynulých prechodov medzi snímkami nemôžete použiť hardvérovú akceleráciu.

To platí najmä pre mobilné zariadenia s nízkorýchlostným internetovým pripojením, často využívajúcim hardvér, a tu môžu byť obzvlášť viditeľné prerušované skokové zmeny v snímkach.

Dá sa to opraviť pomocou funkcie translate3d transform, vďaka ktorej sa snímky budú pohybovať hladko. Táto funkcia berie hodnoty x, y a z ako argumenty a zmena ktorejkoľvek z týchto hodnôt zmení pozíciu cieľového prvku.

Charakteristickým rysom tejto funkcie je aj to, že v dôsledku jej používania hardvér prehliadača urýchľuje zmenu polohy. na čo čakáme?

Prvá vec, ktorú musíme urobiť, je zmeniť pravidlo štýlu #wrapper. Nahraďte deklaráciu vlastností pozície a vľavo nasledujúcim kódom:

Transformácia sa teda používa na nastavenie počiatočnej polohy prvku obalu.

Prvý krok: pridanie konštrukčných prvkov

V prvej fáze pridáme nasledujúci pomocný kód pod hlavný kód, ktorý momentálne máme:

// // Použitie transformácií // var transforms = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var transformProperty = getSupportedPropertyName (transformuje); // správa predpôn dodávateľa funkcia getSupportedPropertyName (vlastnosti) (pre (var i = 0; i< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }

Tento kód nám pomôže nastaviť vlastnosť transform pomocou predpôn dodávateľa, takže ho bude podporovať čo najviac prehliadačov.

Tieto reťazce v tomto článku nebudem vysvetľovať. Jediná vec, ktorú potrebujete vedieť, je, že celý tento kód pomáha nastaviť vlastnosť Property na transform, msTransform, mozTransform alebo oTransform. V závislosti od veku vášho prehliadača sa použije jedna z týchto hodnôt.

Druhý krok: predstavenie Ahoy!

Vo funkcii changePosition nájdite nasledujúce riadky kódu:

function changePosition (link) (var position = link.getAttribute ("data-pos"); wrapper.style.left = position; link.classList.add ("active");)

Nahraďte ich nasledujúcim kódom:

function changePosition (link) (var position = link.getAttribute ("data-pos"); var translateValue = "(! LANG: translate3d (" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}

Tento kód robí celkom jednoduché veci. Premenná translateValue vytvára zobrazenie funkcie translate3d založené na reťazcoch, v ktorom je časť X vyplnená hodnotou premennej polohy. Po vytvorení tohto riadku ho stačí odovzdať objektu štýlu prvku wrapper.

Všimnite si, že definíciu zodpovedajúcej vlastnosti štýlu má na starosti premenná transformProperty, o ktorej sme sa už zmienili.

Ak sa teraz pozriete na dokument, uvidíte, že bloky obsahu na posúvači preskakujú z jedného miesta na druhé.

Je zrejmé, že to nie je to, čo ste očakávali, že uvidíte. Čo sa stalo s plynulým pohybom? Odpoveď je, že nám chýba ešte jedna zmena. Našťastie sa to dá ľahko opraviť. Ak sa vrátime k pravidlu štýlu #wrapper, všimneme si, že deklarácia prechodu vyzerá takto:

#wrapper (šírka: 2200 pixelov; transformácia: translate3d (0, 0, 0); prechod: ľavé 0,5 s nabehnutie von;)

Náš prechod sleduje zmeny ľavého vlastníctva. Túto vlastnosť už nepoužívame, takže náš prechod nemôže začať fungovať. Ak chcete napraviť túto hroznú nespravodlivosť, nahraďte kľúčové slovo left property vo vnútri deklarácie prechodu kľúčovým slovom vlastnosti transform:

#wrapper (šírka: 2200px; transform: translate3d (0, 0, 0); transition: transform .5s easy-in-out;)

Po vykonaní týchto zmien bude náš posuvník opäť fungovať v podstate rovnakým spôsobom ako predtým.

Jediný rozdiel je v tom, že pri výmene snímok sa teraz používa hardvérová akcelerácia, ktorá bude teraz plynulejšia a podporovaná na viacerých zariadeniach.

Automatická výmena sklíčka v intervaloch niekoľkých sekúnd

V súčasnosti sa naše snímky zmenia iba vtedy, keď klikneme na jeden z navigačných odkazov. Toto však nie je jediný spôsob, ako posuvník funguje. Mnohé posúvače obsahu automaticky posúvajú obsah každých pár sekúnd a nechýba ani možnosť preskočiť na konkrétnu sekciu pomocou navigačných odkazov.

Príklad jedného takéhoto posúvača obsahu, ktorý vidíte nižšie:

Áno, toto je náš starý posúvač s malými zmenami, aby sa obsah mohol automaticky posúvať v kontajneri. Hádajte, čo budeme robiť ďalej?

Dovoľte, aby sa snímky posúvali automaticky!

Pomôže nám s tým funkcia setInterval. Hlavným účelom tejto funkcie je zabezpečiť, aby sa kód spúšťal v pravidelných intervaloch:

window.setInterval (funkciaToCall, oneskorenie);

Každých pár sekúnd ( alebo koľko nastavíte ako hodnotu intervalu), funkcia setInterval povie nášmu posuvníku, aby prešiel na ďalší blok obsahu.

Keď obsah skončí, posúvač prejde slučkou na začiatok obsahu a začne odznova. To sa robí celkom jednoducho. Všetko, čo potrebujete vedieť, je niekoľko trikov a dobré pochopenie toho, ako funguje posúvač obsahu.

Prvá zmena, ktorú musíme urobiť, je pridať dodatočný kód potrebný na vykonanie tejto úlohy. Na koniec kódu, ktorý už máte, pridajte nasledujúce riadky:

// // Kód pre automatickú zmenu snímok // var timeoutID; funkcia startTimer () (// počkajte 2 sekundy pred volaním goInactive timeoutID = window.setInterval (goToNextItem, 2000);) startTimer (); function goToNextItem () (removeActiveLinks (); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }

Čoskoro sa pozrieme na to, čo tento kód znamená. Teraz pridajte toto všetko. Keď to urobíte, zobrazte vo svojom prehliadači posúvač obsahu. Uvidíte, ako sa snímky obsahu v kontajneri menia každé dve sekundy.

Ostáva nám už len jedna zásadná zmena. Snímky sa teraz otáčajú každé dve sekundy bez ohľadu na to, či ste klikli na navigačný odkaz alebo nie.

Správnejšie by bolo urobiť tak, že po kliknutí na jeden z odkazov sa časovač nastaví na 0. Ak chcete vykonať túto zmenu, pridajte nasledujúci riadok kódu do obsluhy udalosti setClickedItem:

Potom sa posúvač obsahu bude správať podľa očakávania, keď vstúpite a kliknete na navigačný odkaz. Hurá!

Vysvetlenie automatických zmien snímok

Zostáva nám teda riešiť len jednu vec. Poďme sa rýchlo pozrieť na kód, ktorý sme práve pridali, a pochopiť, prečo robí to, čo robí.

Začnime funkciou goToNextItem / span>:

function goToNextItem () (removeActiveLinks (); if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}

Táto funkcia je zodpovedná za sledovanie obsahu, ktorý sa práve zobrazuje a čo nasleduje. Aby ste lepšie porozumeli tomu, čo sa deje, pozrite sa na obrázok nižšie:

Premenná activeLink označuje polohu aktuálne zobrazeného bloku obsahu. Každá informácia je spojená s príslušným prvkom v poli odkazov.

Celkový počet prvkov v poli odkazov je možné nastaviť pomocou vlastnosti length. Teraz sa vráťme k nášmu kódu.

Príkaz if funkcie goToNextItem jednoducho skontroluje, či je tam stále obsah, alebo či sa má posuvník vrátiť na začiatok:

if (activeLink< links.length - 1) { activeLink++; } else { activeLink = 0; }

Ak sa pozorne pozriete na diagram a kód, pochopíte logiku. V podstate, keď dostaneme správnu hodnotu pre activeLink, všetko ostatné v našom posúvači bude fungovať ako mágia.

Samotné kúzlo je dosiahnuté pomocou nasledujúcich dvoch riadkov poskytovaných funkciou changePosition, ktorá sa zase volá s ukazovateľom na ďalší blok obsahu, ktorý sa má zobraziť:

var newLink = odkazy; changePosition (newLink);

V súčasnosti sa cesta, ktorou je náš kód spracovaný, nelíši od toho, ako bol spracovaný pri manuálnom kliknutí na odkaz.

Takže... pozreli sme sa na kód vo funkcii goToNextItem, aby sme prešli na ďalšiu časť obsahu. Nasledujúce riadky sa automaticky použijú na vyvolanie tejto snímky:

var timeoutID; funkcia startTimer () (// počkajte 2 sekundy pred volaním goInactive timeoutID = window.setInterval (goToNextItem, 2000);) startTimer (); funkcia resetTimer () (window.clearInterval (timeoutID); startTimer ();)

Na spustenie slúži funkcia startTimer. Táto funkcia obsahuje volanie funkcie setInterval, ktorá zabezpečuje, že funkcia goToNextItem sa volá každé 2 sekundy ( alebo 2000 milisekúnd).

Jednoduchým pridaním tejto funkcie (a jej vyvolaním) spustíte posúvač obsahu automaticky rolovanie blokmi obsahu.

Zostáva len zistiť, ako sa resetuje časovač ( ktorý som nazval setInterval), keď manuálne kliknete na odkaz. Na vyriešenie tohto problému sa používa zvyšok nášho kódu.

Spôsob, akým sa časovač vynuluje, je nasledovný: zastavíme funkciu setInterval a potom ju znova spustíme. Ako sa to robí, môže byť trochu zložité zistiť.

Uložíme identifikátor volanej funkcie setInterval a potom použijeme rovnaký identifikátor, aby sme neskôr prestali volať rovnakú funkciu setInterval. Aby som bol jasný.

Tento identifikátor uložíme do premennej timeoutID a inicializujeme ho vo volaní startTimer a je vhodné použiť rovnaký identifikátor vo funkcii resetTimer:

funkcia resetTimer () (window.clearInterval (timeoutID); startTimer ();)

Funkcia clearInterval preberá identifikátor (prostredníctvom timeoutID) funkcie setInterval, ktorú chceme zastaviť.

Po zastavení časovača vo funkcii resetTimer zavoláme startTimer a spustíme všetko odznova:

funkcia resetTimer () (window.clearInterval (timeoutID); startTimer ();)

Logika je jednoduchá. Časovač sa zastaví, keď manuálne vyberiete, ktorý blok obsahu sa má zobraziť na posúvači:

function setClickedItem (e) (removeActiveLinks (); resetTimer (); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition (clickedLink);)

Po výbere nového bloku obsahu sa posúvač na dve sekundy zastaví a potom prejde na ďalší blok. Toto všetko sledujú funkcie startTimer a resetTimer.

Záver

To je všetko, prebrali sme, ako vytvoriť krásny posúvač obsahu iba pomocou

Html

CSS

a JavaScript. Okrem toho ste sa naučili, ako nastaviť niektoré zmeny s cieľom zvýšiť výkon a poskytnúť možnosť automaticky meniť bloky obsahu.

Aj keď samotný posuvník nie je definovaný takým množstvom kódu, môže chvíľu trvať, kým rozoberie koncepty za ním. Do článku som umiestnil odkazy na iné zdroje, ktoré pokrývajú témy, ktorých som sa dotkol len povrchne. Môžete si ich prečítať, keď na to budete mať čas.

Posuvníky obsahu sa dodávajú vo všetkých tvaroch a veľkostiach. Niektoré pozostávajú z niekoľkých úrovní, kde je možné meniť obsah vertikálne aj horizontálne.

Niektoré posúvače obsahujú zvislo zarovnaný obsah s blokmi naskladanými jeden na druhom. Ak ste skôr proaktívni a chcete namiesto prechodu použiť CSS

Pred časom som začal ovládať jQuery. Myslím, že každý vie, že toto je názov najpopulárnejšej knižnice na vývoj a vytváranie skriptov (skriptov) v JavaScripte. S jeho pomocou je veľmi jednoduché vytvárať efektné a interaktívne prvky webu.

V tomto článku vám chcem povedať, ako vytvoriť jednoduchý univerzálny posuvník pomocou jQuery. V skutočnosti je na sieti veľmi veľké množstvo rôznych hotových posúvačov, ktoré niekedy vyzerajú veľmi lákavo a sú celkom funkčné, ale urobíme to od začiatku.

Takže, aké vlastnosti nášho posúvača jQuery (ktorý som nazval HWSlider) možno zaznamenať?

• Jednoduché použitie a dizajn - chcel som vytvoriť jednoduchý skript bez zvončekov a píšťaliek, preto som nepoužil animácie v CSS3 a kód sa ukázal ako veľmi univerzálny a zrozumiteľný.
• Možnosť vložiť do snímok obrázky aj ľubovoľný HTML kód.
• Schopnosť posúvať snímky v poradí (dopredu - dozadu) a vybrať každú snímku (1,2,3,4 ...)
• Automaticky generované odkazy (predchádzajúca - nasledujúca as číslami snímok). Stačí vložiť požadovaný počet divov a zvyšok sa vypočíta sám. No, možno poznamenať, že počet snímok je neobmedzený.

Skript je kompatibilný so všetkými modernými prehliadačmi: IE, Opera, Firefox, Safari, Chrome (pretože posuvník nepoužíva CSS3).

Začnime so značkami HTML. Musíte ho vložiť na správne miesto html stránky alebo šablóny.

Všetko je tu jednoduché, ako vidíte, vytvorením nových divov môžete vložiť toľko snímok, koľko chcete. Do nich môžete vložiť ľubovoľný html kód, napríklad obrázok alebo blok s textom. Nezabudnite zahrnúť samotnú knižnicu jQuery spolu so všetkými skriptmi js. Ak neviete ako, pozrite si príklad.

# slider-wrap (/ * Zalomenie posúvača a tlačidiel * / šírka: 660px;) #slider (/ * Zalomenie posúvača * / šírka: 640px; výška: 360px; pretečenie: skryté; okraj: #eee pevné 10px; poloha: relatívna; ) .slide (/ * Slide * / šírka: 100 %; výška: 100 %;) .sli-links (/ * Slide buttons * / margin-top: 10px; text-align: center;) .sli-links. control -slide (okraj: 2px; zobrazenie: vložený blok; šírka: 16px; výška: 16px; pretečenie: skryté; odsadenie textu: -9999px; pozadie: adresa URL (radioBg.png) v strede dole bez opakovania;) .sli - odkazy .control-slide: hover (kurzor: ukazovateľ; poloha na pozadí: stred uprostred;) .sli-links .control-slide.active (pozícia na pozadí: stred hore;) #prewbutton, #nextbutton (/ * Odkaz " Ďalej a predchádzajúci * / zobrazenie: blok; šírka: 15px; výška: 100 %; pozícia: absolútna; horná časť: 0; pretečenie: skryté; odsadenie textu: -999px; pozadie: adresa URL (arrowBg.png) ľavý stred bez opakovania; nepriehľadnosť: 0,8; z-index: 3; obrys: žiadny! dôležité;) #prewbutton (vľavo: 10px;) #nextbutton (vpravo: 10px; pozadie : url (arrowBg.png) vpravo v strede bez opakovania;) #prewbutton: vznášanie sa, #ďalšie tlačidlo: vznášanie sa (nepriehľadnosť: 1;)

Poďme sa na to pozrieť bližšie. Najprv dáme hlavnej krabici s ID "slider-wrap" požadovanú šírku. Keďže sú do nej vložené všetky ostatné bloky, výška sa nedá nastaviť, bude závisieť od toho, čo je vo vnútri. Potom musíme nastaviť rozmery nádoby, v ktorej budú sklíčka umiestnené. Toto je #slider. Dajme tomu šírku a výšku, ako aj napríklad hranicu 10 pixelov. Tu je šírka 640 pixelov, čo je menej ako šírka rodiča, pretože pridávame okraje široké 10 pixelov vpravo a vľavo. Od šírky tohto divu závisí aj šírka samotných diapozitívov (.slide).

A posledná vec: musíme si byť istí, že sme nastavili polohu: relatívnu pre zásobník sklíčok, pretože sklíčka vo vnútri sú s absolútnym polohovaním. Pre samotné snímky sa v CSS nastavuje iba šírka a výška. Ostatné vlastnosti sú nastavené už v skripte jQuery.

Selektor.sli-links je blok, v ktorom budú umiestnené tlačidlá pre navigáciu na požadovanú snímku. Tieto tlačidlá sú jednoduchými prvkami formulára miestnosť, ktoré budú vložené v požadovanom množstve automaticky spolu s ich nadradenými sli-linkami. Tlačidlám sme nastavili pekný vzhľad, konkrétne urobíme každé tlačidlo štvorcové, zarovnáme ich všetky na stred a tiež vďaka pretečeniu: skryté a odsadenie textu: -9999px odstránime text a ponecháme iba ikony na pozadí , ktoré sa tiež zmenia pri umiestnení kurzora myši na daný prvok kurzora. Pre pohodlie som použil sprites, čo znížilo počet obrázkov.

Ďalej sa nakreslí aktívne tlačidlo. Len zmeníme polohu pozadia. Potom upravíme dizajn odkazov, aby sme prešli na ďalšiu a predchádzajúcu snímku. Môžete im dať akúkoľvek ozdobu, rovnako ako gombíky. Tieto odkazy sa automaticky vkladajú do #slidera. Ale aby som ich ukázal, dal som im absolútne umiestnenie a vrchnú vrstvu (z-index: 3), aby sa zobrazovali nad snímkami. Myslím, že s CSS je všetko jasné a jednoduché: môžete zmeniť takmer všetky vlastnosti, aby ste navrhli posúvač tak, ako ho potrebujete.

Poďme sa teraz pozrieť na samotný scenár:

Var hwSlideSpeed ​​​​= 700; var hwTimeOut = 3000; var hwNeedLinks = true; $ (dokument) .pripravený (funkcia (e) ($ (. snímka)). css (("pozícia": "absolútne", "hore": "0", "vľavo": "0")). skryť () .eq (0) .show (); var slideNum = 0; var slideTime; slideCount = $ ("# posuvník .snímka"). size (); var animSlide = funkcia (šípka) (clearTimeout (slideTime); $ (.slide"). eq (slideNum) .fadeOut (hwSlideSpeed); if (šípka == "next") (if (slideNum == (slideCount-1)) (slideNum = 0;) else (slideNum ++) ) else if (šípka == "prew") (if (slideNum == 0) (slideNum = slideCount-1;) else (slideNum- = 1)) else (slideNum = šípka;) $ (. slide"). eq ( slideNum) .fadeIn (hwSlideSpeed, rotátor); $ (. control-slide.active"). removeClass ("active"); $ (. control-slide"). eq (slideNum) .addClass ("active" ") ;) if (hwNeedLinks) (var $ linkArrow = $ ("") .prependTo ("# posuvník"); $ ("# ďalšie tlačidlo") kliknutie (funkcia () (animSlide ("ďalší"));)) $ ( "#prewbutton"). kliknutie (funkcia () (animSlide ("prew");))) var $ adderSpan = ""; $ (. slide"). každá (funkcia (index) ($ adderSpan + = " "+ index +""; }); $("

") .appendTo (" # slider-wrap "); $ (. control-slide: first "). addClass (" active "); $ (. control-slide "). kliknutie (funkcia () (var goToNum = parseFloat ($ (this) .text ()); animSlide (goToNum);)); var pause = false; var rotator = funkcia () (if (! pauza) (slideTime = setTimeout (funkcia) (animSlide (" next ")), hwTimeOut);)) $ (" # slider-wrap "). podržte sa (funkcia () (clearTimeout (slideTime); pauza = pravda;), funkcia () (pauza = nepravda; rotátor ();) rotátor ();));

Najprv sa nastavenia uložia do premenných: hwSlideSpeed ​​​​– rýchlosť snímok, hwTimeOut – čas, po ktorom sa automatická snímka zmení, hwNeedLinks – ovláda odkazy „Ďalší“ a „Predchádzajúci“ – ak je hodnota tejto premennej je pravda, potom sa tieto odkazy zobrazia, a ak sú nepravdivé , nebudú (ako na hlavnej stránke môjho blogu).

Ďalej pomocou metódy .css () nastavíme požadované vlastnosti CSS pre snímky. Bloky so snímkami položíme na seba pomocou absolútneho umiestnenia, potom ich všetky skryjeme pomocou skryť () a potom zobrazíme iba prvý. Premenná slideNum je číslo aktívneho slideNum, teda počítadla.

Hlavnou logikou nášho posúvača jQuery je funkcia animSlide. Chce to jeden parameter. Ak do nej odovzdáme reťazce „ďalší“ alebo „predchádzajúci“, potom sa spustia podmienené operátory a zobrazí sa nasledujúca alebo predchádzajúca snímka. Ak pošleme číslo ako hodnotu, toto číslo sa stane aktívnou snímkou ​​a zobrazí sa.

Táto funkcia teda skryje aktuálny div, vypočíta nový a zobrazí ho.

Všimnite si, že metóda .fadeIn (), ktorá zviditeľňuje aktívnu snímku, má druhý argument. Ide o takzvanú funkciu spätného volania. Vykoná sa, keď je snímka úplne zobrazená. V tomto prípade sa to robí, aby sa zabezpečilo automatické posúvanie snímok. Funkcia rotátora, definovaná nižšie, opäť volá funkciu animSlide, aby sa presunula na ďalšiu snímku v intervale, ktorý potrebujeme: dostaneme uzáver, ktorý poskytuje konštantné posúvanie.

Všetko funguje dobre, ale musíme zastaviť automatické vykonávanie, ak používateľ presunie kurzor na posúvač alebo stlačí tlačidlá. Na tento účel bola vytvorená premenná pauza. Ak je jeho hodnota kladná - pravda, potom nedôjde k automatickému prepínaniu. Pomocou metódy .hover () špecifikujeme: vymazať časovač, ak je spustený - clearTimeout (slideTime) a nastavíme pauzu = true. A po vypnutí kurzora vypnite pauzu a spustite zatváranie rotátora ().

Okrem toho musíme na stránke vytvoriť nové prvky a umiestniť ich na správne miesto. Pomocou každej () slučky pre každú snímku (div s class.slide) vytvorte prvok span, vo vnútri ktorého bude číslo - číslo snímky. Toto číslo sa používa vo funkcii animácie na prechod na snímku s týmto číslom. Poďme všetko zabaliť do div s potrebnými triedami a ako výsledok dostaneme nasledujúce označenie:

Zdalo by sa, prečo vytvárame značky vo vnútri skriptu a nie v kóde HTML?. Faktom je, že ak má používateľ napríklad vypnuté skripty, neuvidí prvky, ktoré nebudú fungovať, a nebude ho to zmiasť. Tiež to zjednodušuje kód, čo je dobré pre SEO.

V dôsledku toho bude označenie posúvača vyzerať asi takto (použil som obrázky ako snímky a nainštaloval som 5 kusov):

Nižšie môžete vidieť, ako funguje náš posúvač jQuery na stránke ukážky, a stiahnuť si všetky potrebné zdroje.

Nakoniec niekoľko bodov o integrácii tohto posúvača s Drupalom. Tento kód môžete pridať do súboru šablóny, napríklad page.tpl.php, a priložiť skript k téme v samostatných súboroch js. Jquery je predvolene povolený v Drupale, ale funguje v režime quirks (). Existujú dve možnosti na zlepšenie. Alebo zabaľte celý js kód:

(funkcia ($) (// Celý váš kód ...)) (jQuery);

alebo nahraďte znaky $ v celom skripte jQuery. Páči sa ti to:

JQuery (dokument) .ready (funkcia (e) (jQuery (. Snímka). Css (("pozícia": "absolútne", "hore": "0", "vľavo": "0")). Skryť () .eq (0) .show (); var slideNum = 0; var slideTime; slideCount = jQuery („# ​​slider .slide“). veľkosť (); var animSlide = funkcia (šípka) (// atď. ...

Príklad už implementoval prvú metódu.

Vďaka za prečítanie! Nechajte komentáre, príďte znova. Môžete sa tiež prihlásiť na odber RSS, aby ste ako prví dostávali aktualizácie blogu!

Pridané: To nie je všetko. Pokračuj v čítaní. Tam pridáme do tohto skriptu nové funkcie.

1. Vynikajúca prezentácia jQuery

Veľká efektívna prezentácia využívajúca technológie jQuery.

2. Doplnok jQuery „Scale Carousel“

Škálovateľná prezentácia pomocou jQuery. Budete si môcť nastaviť rozmery pre prezentáciu, ktoré vám najviac vyhovujú.

3. Doplnok jQuery "slideJS"

Posuvník obrázkov s textovým popisom.

4. Plugin "JSliderNews"

5. Posúvač CSS3 jQuery

Keď umiestnite kurzor myši na navigačné šípky, zobrazí sa kruhová miniatúra ďalšej snímky.

6. Pekný posúvač jQuery "Presentation Cycle".

Posuvník jQuery s indikátorom načítania obrázkov. Existuje automatická výmena sklíčok.

7. Doplnok jQuery "Parallax Slider"

Posuvník s efektom 3D pozadia. Vrcholom tohto posúvača je pohyb na pozadí, ktorý sa skladá z niekoľkých vrstiev, z ktorých každá sa posúva inou rýchlosťou. Výsledkom je imitácia objemového efektu. Vyzerá to veľmi pekne, môžete sa sami presvedčiť. Efekt sa zobrazuje plynulejšie v prehliadačoch ako: Opera, Google Chrome, IE.

8. Svieži a ľahký posúvač jQuery „bxSlider 3.0“

Na ukážkovej stránke v sekcii „príklady“ nájdete odkazy na všetky možné prípady použitia tohto pluginu.

9.jQuery Image Slider, doplnok "slideJS".

Štýlový jQuery slider určite dokáže ozdobiť váš projekt.

10. jQuery plug-in slideshow "Easy Slides" v1.1

Ľahko použiteľný doplnok jQuery na vytváranie prezentácií.

11. Plugin "jQuery Slidy"

Odľahčený doplnok jQuery v rôznych prevedeniach. Existuje automatická výmena sklíčok.

12.jQuery CSS galéria s automatickým meničom snímok

Ak návštevník do určitého času neklikne na šípky „Vpred“ alebo „Späť“, galéria sa začne automaticky posúvať.

13. Posuvník jQuery Nivo

Veľmi profesionálny vysoko kvalitný odľahčený plugin s platným kódom. Existuje mnoho rôznych efektov prechodu snímky.

14. Posuvník jQuery "MobilySlider".

Čerstvý posúvač. Posuvník jQuery s rôznymi efektmi na zmenu obrazu.

15. Doplnok jQuery Slider²

Ľahký posúvač s automatickou výmenou posúvača.

16. Fresh javascript slider

Posuvník s automatickou zmenou obrazu.

Plugin na implementáciu prezentácie s automatickou zmenou snímky. Displej je možné ovládať pomocou miniatúr obrázkov.

Posuvník obrázkov jQuery CSS pomocou doplnku NivoSlider.

19. Posuvník jQuery "jShowOff".

Plugin na rotáciu obsahu. Tri prípady použitia: žiadna navigácia (s automatickou zmenou formátu prezentácie), s navigáciou vo forme tlačidiel, s navigáciou vo forme miniatúr.

20. Plugin "Portfólio efektov uzávierky"

Čerstvý doplnok jQuery pre portfóliá fotografií. Galéria má zaujímavý efekt meniacich sa obrázkov. Fotografie na seba nadväzujú s efektom podobným činnosti spúšte objektívu.

21. Ľahký javascriptový posúvač CSS „TinySlider 2“

Implementácia obrázkového posúvača pomocou javascriptu a CSS.

22. Úžasný posúvač "Tinycircleslider"

Štýlový okrúhly posúvač. Prechod medzi obrázkami sa vykonáva ťahaním po obvode posúvača vo forme červeného kruhu. Dokonale zapadne na vašu stránku, ak vo svojom dizajne použijete oblé prvky.

23. Posuvník obrázkov jQuery

Easy Slider Kit. Posuvník je prezentovaný v rôznych verziách: vertikálne a horizontálne. Tiež sú implementované rôzne typy navigácie medzi obrázkami: pomocou tlačidiel "Dopredu" a "Späť", pomocou kolieska myši, pomocou kliknutia myšou na snímku.

24. Galéria s miniatúrami "Slider Kit"

Galéria "Slider Kit". Posúvanie miniatúr sa vykonáva vertikálne aj horizontálne. Prechod medzi obrázkami sa vykonáva pomocou: kolieska myši, kliknutia myšou alebo umiestnením kurzora myši na miniatúru.

25. Posuvník obsahu súpravy jQuery Slider Kit

Vertikálny a horizontálny posuvník obsahu JQuery.

26. Prezentácia súpravy jQuery Slider Kit

Prezentácia s automatickou zmenou snímky.

27. Ľahký profesionálny javascriptový posúvač CSS3

Úhľadný posúvač jQuery a CSS3 vytvorený v roku 2011.

Prezentácia miniatúr jQuery.

29. Jednoduchá prezentácia jQuery

Prezentácia s navigačnými tlačidlami.

30. Úžasná prezentácia jQuery "Skitter".

jQuery plugin "Skitter" na vytváranie úžasných prezentácií. Plugin podporuje 22 (!) druhov rôznych animačných efektov pri zmene obrázkov. Môže pracovať s dvoma možnosťami navigácie na snímkach: číslami snímok a miniatúrami. Nezabudnite si pozrieť demo, veľmi kvalitný nález. Použité technológie: CSS, HTML, jQuery, PHP.

31. Prezentácia "Nepríjemná"

Funkčná prezentácia. Vo forme snímok môžu byť: jednoduché obrázky, obrázky s titulkami, obrázky s popismi, videoklipy. Môžete sa pohybovať pomocou šípok, číselných odkazov na posúvanie a klávesov vľavo/vpravo na klávesnici. Prezentácia sa vyrába v niekoľkých verziách: s miniatúrami a bez nich. Ak chcete zobraziť všetky možnosti, kliknite na odkazy Demo #1 - Demo #6 umiestnené v hornej časti stránky s ukážkou.

Veľmi originálny dizajn posúvača obrazu, pripomínajúci ventilátor. Animovaná zmena snímky. Navigácia medzi obrázkami sa vykonáva pomocou šípok. Nechýba ani automatické prepínanie, ktoré je možné zapnúť a vypnúť pomocou tlačidla Play / Pause umiestneného v hornej časti.

Animovaný posúvač jQuery. Pri zmene veľkosti okna prehliadača sa automaticky zmení mierka obrázkov na pozadí. Ku každému obrázku vyskočí blok s popisom.

34. Posuvník "Flux Slider" v jQuery a CSS3

Nový posúvač jQuery. Niekoľko skvelých animovaných efektov pri výmene snímok.

35. Doplnok jQuery jSwitch

Animovaná galéria jQuery.

Jednoduchá prezentácia v jQuery s automatickou zmenou snímky.

37. Nová verzia pluginu "SlideDeck 1.2.2"

Profesionálny posúvač obsahu. K dispozícii sú možnosti s automatickou zmenou snímky, ako aj možnosť pohybu medzi snímkami pomocou kolieska myši.

38. Posuvník jQuery Sudo

Ľahký posúvač obrázkov v jQuery. Existuje veľa možností implementácie: horizontálna a vertikálna zmena obrázka, s odkazom na číslo snímky alebo bez nej, s popisom obrázka alebo bez neho, rôzne efekty zmeny obrázka. K dispozícii je funkcia automatickej výmeny sklíčka. Odkazy na všetky príklady implementácie nájdete na stránke s ukážkou.

39. Prezentácia jQuery CSS3

Prezentácia miniatúr podporuje režim automatickej zmeny snímky.

40. Posuvník toku jQuery

Posuvník s mnohými efektmi na zmenu obrázkov.

41. Jednoduchý posuvník jQuery

Štýlový posúvač obrázkov jQuery.

42. Prezentácia jQuery „Craftyslide“.

43. Celoobrazovková prezentácia jQuery

Prezentácia jQuery HTML5 v plnej šírke so zvukovou stopou.

Jednoduchá prezentácia jQuery.