Laborator foto. Prezentare de diapozitive spectaculoasă în JavaScript jQuery Plugin „Slider²”

Prezentare generală a programelor de creare a prezentărilor Crearea unei prezentări de diapozitive pentru un site web

Când creați o prezentare de diapozitive pentru postare pe un site web, cel mai bine este să utilizați soluții software gata făcute. După părerea mea, cea mai bună și mai ușoară opțiune este să folosești jQuery, o bibliotecă specială gratuită de scripturi (programe JavaScript mici). Articolele anterioare au vorbit deja despre acest minunat instrument de dezvoltare web. De exemplu, vezi articolul Galerie foto jQuery- simplu și frumos! . Acum să folosim jQuery pentru a crea o prezentare de diapozitive pe site, așa-numitul slider.

Pentru a face acest lucru, vom folosi pluginul Slides, creat de programatorul Nathan Searles, director tehnic al studioului de design „The Brigade” din Portland, Oregon, SUA. O alta dintre evolutiile sale a fost descrisa in articolul Galerie foto pentru un magazin online.

Pluginul Slides este ușor de instalat, are mai multe opțiuni pentru schimbarea imaginilor într-o prezentare de diapozitive și este adesea folosit pentru antetul site-ului. Un exemplu despre cum funcționează acest glisor cu setările implicite este prezentat în figură:

Instalarea unei prezentări de diapozitive Diapozitive

Ca întotdeauna, creați mai întâi un folder de scripturi pe site. Apoi trebuie să descărcați arhiva și să o despachetați în folderul creat. Acesta va conține două scripturi jquery-1.8.3.min.js și jquery.cycle.all.min.js.

Apoi, în titlul paginii din interiorul etichetei... inserăm următoarele rânduri, care indică calea către scripturi și un mic javascript care definește parametrii prezentarii de diapozitive:

$(".slideshow").cycle((
fx: „decolorează”
});
});

.slideshow(
latime: 200px;
înălțime: 135px;
margine: auto;
}

După cum puteți vedea, există și o regulă CSS simplă în care trebuie să specificați dimensiunea ferestrei pentru imaginile viitoarei prezentari de diapozitive (lățime - înălțime). Desigur, toate imaginile trebuie să aibă aceeași dimensiune. Dacă doriți, puteți extinde opțiunile CSS adăugând, de exemplu, chenare, fundaluri, umplutură și alte elemente pentru imaginile de prezentare. În acest caz, trebuie să indicați dimensiunea totală, adică imaginea plus indentările și marginile de-a lungul lungimii și lățimii pe care le-ați setat.

Notă importantă: Dacă site-ul dvs. folosește mai multe plugin-uri jQuery, atunci este mai convenabil să mutați fișierul jquery.js (de preferință cea mai recentă versiune) în folderul rădăcină pentru a nu-l descărca de mai multe ori. În acest caz, linia de accesare a acestuia va arăta la fel pentru toate pluginurile. În special, pentru exemplul nostru, se dovedește astfel:

Nu este recomandat să folosiți mai multe versiuni diferite de jQuery pe aceeași pagină, astfel încât acestea să nu intre în conflict între ele. În același timp, asigurați-vă că verificați dacă pluginurile funcționează cu versiunea instalată de jQuery, deoarece nu toate versiunile sunt interschimbabile.

Ultimul pas este plasarea imaginilor pe pagină. Totul este simplu și aici. Plasați imaginile într-o etichetă sau altă etichetă care vă permite să setați lățimea și înălțimea și specificați-i class="slideshow" . Pentru exemplul nostru, codul HTML pentru glisor arată astfel:

În acest moment, crearea prezentării de diapozitive este aproape completă și o puteți vizualiza deschizând pagina în browser.

Setarea opțiunilor de prezentare de diapozitive Diapozitive

În prezentarea de diapozitive creată, puteți seta diferite tipuri de tranziții între cadre prin modificarea javascript-ului plasat în antetul paginii. În plus, prin înlocuirea liniei sync:false din script cu sync:true , puteți elimina spațiul atunci când schimbați imagini.

Durata de afișare a imaginilor este controlată de parametrul timeout, iar viteza de parametrul de viteză. De exemplu, iată câteva opțiuni comune de prezentare de diapozitive și scripturi corespunzătoare care ar trebui inserate în antetul paginii.

1. Dizolvarea (exemplul nostru): $(document).ready(funcție() ( $(".slideshow").cycle(( fx: „fade”, //tip de tranziție viteza: 1000 , //viteza de schimbare a imaginii timeout: 1000 //durata cadrului }); });
2. Amestecare: $(document).ready(funcție() ( $(".slideshow").cycle(( fx: „amestecă”, sincronizare: fals, viteza: 500 timeout: 5000 }); });
3. Zoom: $(document).ready(funcție() ( $(".slideshow").cycle(( fx: „zoom”, sincronizare: fals }); });
4. Întoarceți axa X sau Y: $(document).ready(funcție() ( $(".slideshow").cycle(( fx: "cortinaX", // pentru rotație de-a lungul axei Y - curtainY sincronizare: fals }); });
5. Restrângeți pe verticală: $(document).ready(funcție() ( $(".slideshow").cycle(( fx: „turnDown”, // direcția poate fi setată turnUp, turnLeft, turnRight sincronizare: adevărat }); });
6. Defilare (offset): $(document).ready(funcție() ( $(".slideshow").cycle(( fx:"scrollDown", // direcția de deplasare poate fi setată scrollUp, scrollLeft, scrollRight sincronizare: adevărat }); });
7. Fade spre dreapta: $(document).ready(funcție() ( $(".slideshow").cycle(( fx: „copertă }); });

Uneori trebuie să plasați mai multe opțiuni de prezentare de diapozitive pe o singură pagină a site-ului, așa cum se face în acest articol. Pentru a face acest lucru, trebuie doar să specificați clase diferite pentru fiecare opțiune în linia $(".slideshow").cycle((( (vezi codul din tabelul de mai sus) și nu uitați să specificați dimensiunile ferestrei pentru fiecare clasă în CSS.

Slideshow pentru site

Fiecare webmaster trebuie să poată crea și adăuga o prezentare de diapozitive pe un site web. Utilizarea glisoarelor este extrem de populară și pot fi găsite pe aproape orice resursă modernă.

Și nu este o coincidență!

Dacă ați fost pe pagina „Animation”, ați văzut acolo munca animației GIF.
Grozav, desigur! Și este creat destul de simplu - în Photoshop. Numai că are un dezavantaj semnificativ, care limitează foarte mult utilizarea pe site-uri web. Culoare scăzută.

Prezentarea de diapozitive este complet lipsită de acest dezavantaj.!

De aceea, pentru a plasa pe site diverse desene și fotografii multicolore, cel mai bine este să folosiți o expunere de diapozitive, mai degrabă decât animație.

Doar în acest caz, folosirea HTML+CSS simplu, atât de dragă inimii mele, nu va mai fi suficientă. Trebuie să includeți scripturi......!

Crearea unui slideshow pe site

Cea mai bună soluție este să folosiți jQuery.
Pe paginile secțiunii LARGE DOUBLE dedicată acestei minunate tehnologii: „jQuery”, există multe exemple de utilizare a acesteia. Nu mă voi repeta.

Aici am folosit jQuery pentru a crea o prezentare de diapozitive pe site-ul meu sau un așa-numit slider. Acum puteți vedea mai jos lucrarea lui, iar sub ea a scris în detaliu ce a făcut pentru a crea acest tip de glisor și a arătat încă 7 (!) glisoare de lucru.

După cum puteți vedea, acest glisor funcționează corect! Totuși, la fel și toți ceilalți. Puteți vedea singur. => urmăriți imediat

**Notă. Spre deosebire de alte pagini din secțiunea jQuery, am scris scripturile necesare direct în codul HTML al acestei pagini.
În plus, ceea ce este foarte important(!), pentru mine funcționează dintr-o versiune diferită de jQuery, ulterioară celei pe care o folosesc aici.

Dacă folosesc versiunea jquery v.1.10.1.min acolo, atunci v.1.8.3.min aici

Cu toate acestea, mai multe despre asta și despre orice altceva, în ordine, mai jos.

Pregătirea unei prezentări de diapozitive

Lucrarea de creare și instalare a unei prezentări de diapozitive pe un site web constă de obicei din 4 etape principale.

Pregătirea imaginilor pentru glisor

1. Fotografii selectate. Principalul lucru este că trebuie să fie o marime. Trebuie să le măsurați cu atenție.
În acest caz, am făcut poze gata făcute din materialele suplimentare atașate cursului de formare. Care? Despre asta aici: „Legături” (se deschide într-o fereastră nouă).

2. Am desenat o imagine grafică a unui glisor în stilul de "TELEVIZOR". Poate că nu este original, dar este foarte convenabil.
Principalul lucru este dimensiunea zonei de vizualizare de care aveți nevoie Un pic mai multîn lățime și înălțime decât desenele pregătite.

Crearea unui cadru HTML+CSS pentru o prezentare de diapozitive

Imaginile sunt scrise în cod HTML exact în acel loc, unde vor fi afișate în viitor. Scripturile pot fi apoi scrise în orice loc convenabil. De obicei le las un spațiu chiar sub poze. Structura este mai logică.

Am plasat imaginile în sine în eticheta p, pentru care am setat lățimea și înălțimea în stilurile CSS și am specificat class="slideshow" . Și paragraful însuși cu ele a fost plasat într-o etichetă div comună, pe fundalul căreia am atârnat o imagine grafică pregătită a glisorului ( TELEVIZOR*). I s-a dat class="slider_fon" .
În plus, doar pentru el, pentru a descărca pagina, am conectat o foaie de stil externă și am făcut totul pentru poze în interiorul codului HTML .

P.S.** Ultimul pas NU este deloc necesar. Doar că e mai convenabil pentru mine. Structura paginii pare cumva mai logică.

În regulile CSS am specificat dimensiunea ferestrei pentru imaginile care vor apărea apoi în glisor (latime inaltime). Desigur, toate imaginile trebuie să aibă aceeași dimensiune.
Dacă se dorește, aș putea extinde parametrii CSS adăugând, să zicem, chenare, fundal, padding și alte elemente. Cu toate acestea, cred că acest lucru ar fi inutil.

Dacă, totuși, doriți să faceți acest lucru, atunci indicați dimensiunile GENERALE, adică: imagine + TOATE set de indenturi și chenare.

Scripturi de conectare

Vă recomand să vizitați pagina de ajutor pe care am făcut-o pentru mine în timp ce învățam tehnologia jQuery. Vă va ajuta cu adevărat să vă dați seama.
L-am făcut public: „SELECTIONARE în jQuery” (se deschide într-o fereastră nouă).

Ca întotdeauna, am creat mai întâi un folder js pe site. Apoi am descărcat scripturile necesare pentru prezentarea de diapozitive (arhivă) și am despachetat-o în acest folder. Conținea două fișiere script: jquery-1.8.3.min.js core și pluginul jquery.cycle.all.min.js.

Pentru orice eventualitate, am adăugat și fișierul meu de control myscripts11.js la el. Totuși, aici nu mi-a fost de folos pentru lansarea și demonstrarea unui slide show. Dacă nu am verificat dacă folderul creat a fost conectat corect.
Dar......să fie. Nu știi niciodată ce voi vrea să fac în viitor cu glisoarele plasate aici. Pe scurt vorbind, „...trenul nostru blindat este mereu pe margine”.

Mai departe. În interiorul etichetei... am introdus rânduri unde am scris căile către scripturi..jpg" type="text/javascript">, iar către plugin: .
Am comentat fișierul meu de control („de rezervă”).

- și ultimul lucru -

Cei care vizitează site-ul meu cu interpretul JavaScript dezactivat în browserul lor nu vor putea, desigur, să vizioneze prezentarea de diapozitive.
Ei vor vedea imaginile așa cum sunt scrise în codul HTML, de exemplu. într-o coloană, una după alta.
Le-am făcut o linie de avertizare și am introdus-o în etichetă...

Poftim! Expunerea de diapozitive a fost creată. Rămâne doar să îi configurați parametrii: viteza de schimbare a imaginilor, modalitățile de afișare a acestora etc.

Setarea opțiunilor de prezentare de diapozitive

După cum am scris mai sus (în notă**), am scris scripturile necesare direct în codul HTML al acestei pagini.
În prezentarea de diapozitive creată pe site-ul meu, am aplicat setările "Mod implicit".

În general, este ușor să setați tipuri diferite și interesante de tranziții între imagini prin schimbarea javascript-ului plasat în corpul paginii.
De exemplu, prin modificarea liniei sync: false la sync: true în script, puteți elimina spațiul atunci când schimbați imagini.

Notă importantă!
Diferitele versiuni de jQuery pot intra în conflict între ele dacă se află pe aceeași pagină.
Asigurați-vă (!) că verificați dacă pluginurile funcționează cu versiunea instalată de jQuery, deoarece nu toate versiunile sunt compatibile!

Exemplu**
Alte pagini din secțiunea jQuery care folosesc biblioteca au jquery v.1.10.1.min instalat. Deci, este mai modern decât v.1.8.3.min, din care corect(!) Slideshow slideshow funcționează aici.

Pluginul jquery.cycle.all.min.js cu acesta NU FUNCȚIONEAZĂ!!!
(verificat)

Totuși, nu fi supărat. Totul în mâinile tale!
În secțiunea „Util” a site-ului meu (se deschide într-o fereastră nouă) veți găsi testat(!) un set complet de scripturi necesare pentru a crea o astfel de prezentare de diapozitive pe site-ul dvs. (GRATIS, desigur!)

Alte tipuri de prezentari de diapozitive

În această subsecțiune nu voi descrie atât de detaliat toți pașii pentru a crea o prezentare de diapozitive. Practic, sunt absolut la fel.
Chiar mai simplu. Nu este nevoie să desenați o imagine de fundal cu glisor în Photoshop. Chiar separa Nu veți avea nevoie de o foaie de stil CSS.

Dacă doriți să plasați diferite opțiuni de prezentare de diapozitive unu pagina site-ului, așa cum am făcut aici ( vezi mai jos), specificați clase diferite pentru fiecare opțiune în linia de script $(‘ .prezentare de diapozitive').ciclu((

P.S.* Nu uitați să îl includeți în CSS dimensiunile ferestrelor pentru fiecare clasă, dacă, totuși, utilizați o foaie de stil. Nu aveam nevoie.

Priviți mai întâi desenele statice, pe care, în mod similar, le-am luat de la cursul de formare (care? Voi repeta linkul: „Link-uri”) și le-am postat aici pentru comparație.

Aici sunt ei. Viitorii participanți la cea de-a 7-a prezentare de diapozitive!
Urmărește „performanța” lor mai jos.

Vă voi arăta mai multe tipuri populare de glisoare. Le-am introdus în tabelul general pentru ușurință de vizualizare.
În stânga este numele efectului și o scurtă explicație, dacă este necesar. În dreapta este un exemplu.

Sper că v-a plăcut prezentarea de diapozitive „de grup”.
Chiar convenabil! Casele „dansează” - fiecare în propria lui celulă și nu deranjează pe nimeni. Nu e de mirare că le-am dat +5 pentru „performanța” lor!

Dar serios, această metodă de a crea prezentări de diapozitive pentru un site web economisește o cantitate imensă de spațiu pe pagină.
Prin urmare, voi repeta ceea ce s-a spus la începutul secțiunii.
Cea mai bună soluție pentru a crea diferite emisiuni pe site este să folosiți jQuery.

Uite practic Puteți folosi glisoare pentru proiectarea paginilor de resurse pe site-ul de cărți de vizită „Personal Page” pe care l-am creat special.

Este posibil să faci așa ceva FĂRĂ să includă scripturi?
Sigur ca poti! Citiți mai multe despre asta.

Prezentare de diapozitive numai HTML

Cum să creezi un slider simplu pe un site web, pentru a NU folosi diverse complexe și grele (după greutate") scenarii? Uşor!
Nu aș fi aici dacă nu ți-aș fi arătat modalități atât de interesante și simple!

Pentru aceasta vom folosi tehnologiile Internet de bază => HTML + CSS.

De bază înseamnă cele fără de care Internetul este imposibil în principiu!

Cu toate acestea, vizionați mai întâi prezentări de diapozitive simple create numai în HTML, fără a utiliza niciun script.
Am făcut o pagină mică separată special pentru asta.

După aceea, puteți decide singur ce se potrivește cel mai bine cu resursa dvs.

Concluzie

Sper că informațiile postate despre cum puteți crea cu ușurință o prezentare de diapozitive pentru un site web au fost interesante pentru dvs.
În același timp, am postat destul de mult material pe acest subiect fascinant pentru „Portofoliul meu”.

Pentru vizitatorii care trebuie să creeze o expunere de diapozitive sau o galerie pe un site web, să conecteze audio și video la acesta, dar nu au timp să o facă ei înșiși, secțiunea „Selectați un artist” vă poate ajuta (se deschide într-o fereastră nouă).

Am făcut o vizită directă la această pagină din trei secțiuni MARI. De asemenea, vă puteți întoarce direct. Treceți mouse-ul peste săgeți și vor apărea sugestii care arată unde duc acestea.
Făcând clic pe logo-ul de sus, veți fi dus la „Acasă”.

Un glisor simplu, ușor (21Kb comprimat), scris în Javascript pur, fără nicio dependență, de ex.

Program pentru crearea de diapozitive în HTML5

funcționează fără jQuery.

Testat în următoarele browsere:

Chrome 26.0
Firefox 20.0
Safari 5.1.7
IE 10
Opera 16.0

Există suport incomplet pentru IE8/9 (fără efecte).

GitHub | Demo

Particularități

Puteți adăuga un număr nelimitat de glisoare la o pagină, chiar și plasați unul în altul.
Se redimensionează în funcție de conținut, dar poate fi dezactivat.
Navigare prin tastatură - Când cursorul se află pe un glisor, puteți comuta cursorul cu săgeți.
Suport pentru evenimente mobile touch.

Conexiune

Înainte de eticheta de închidere, trebuie să includeți fișierul slidr.js sau slidr.min.js.

Marcaj HTML

slidr.js poate funcționa cu orice elemente care au atributul. Sunt permise orice element copil de primul nivel cu un atribut, de exemplu:

Javascript

După conectarea slidr.js, obiectul global va deveni disponibil. Cel mai simplu mod de a crea:

Apelați cu setarea tuturor setărilor:

Setări

Toate setările disponibile pentru slidr.js sunt prezentate în tabelul de mai jos.

Tip de parametru Implicit Descriere

funcţie	funcția de apel invers după schimbarea slide-ului
funcţie	funcția de apel invers înainte de schimbarea slide-ului
bool	fals	Afișați pesmeturile pentru comenzile slide. sau.
şir	frontieră	Plasarea săgeților pentru controlul slide-ului. , sau.
şir	orizontală	Direcția implicită pentru diapozitive noi. sau sau.
bool	Adevărat	Activați efectul de întunecare pentru schimbarea diapozitivelor (fade-in/out). sau.
bool	fals	Activați schimbarea depozitelor folosind tastatura. sau.
bool	fals	Activați overflow pentru un bloc cu un glisor. sau.
bool	fals	Nu schimbați automat slide-urile la trecerea mouse-ului (trebuie să rulați auto()). sau.
şir	#fff	Culoarea comenzilor glisorului (pesmet și săgeți). sau.
obiect	{}	Timp de animație personalizat de aplicat. .
bool	fals	Activați comenzile tactile pe dispozitivele mobile. sau.
şir	liniar	Efect de schimbare a diapozitivei. , sau.

Funcționează apel invers și primește următoarele date:

API global Slider.js

Spațiul de nume global slidr oferă următoarele funcționalități:

Slider API

Intrare scurtă

Lista completă a funcțiilor API Slidr.js este prezentată mai jos

Pagini derulate la schimbarea diapozitivelor

Această eroare neplăcută apare în unele browsere. Pentru a o remedia, trebuie să adăugați un stil la:

Redimensionare dinamică

Slidr însuși „înțelege” dacă glisorul trebuie redimensionat pentru a se potrivi cu imaginea. Dacă blocul glisor are dimensiuni specificate, Slidr nu le va schimba automat. Dacă sunt specificate proprietățile de lățime minimă și înălțime minimă, atunci glisorul își va schimba dimensiunea pentru a se potrivi conținutului, ținând cont de aceste valori. În caz contrar, dimensionarea va fi determinată automat.

Redimensionare automată

Dimensiuni statice

Comenzi Slider

Dispunerea controalelor este următoarea:

Puteți personaliza orice control glisor folosind selectoare CSS:

Controlul săgeată este implementat folosind un pseudoselector, așa că pentru a-l ascunde folosiți următorul cod:

Pesmet Slider

Breadcrumb-urile au un marcaj HTML simplu. Fiecare denotă întreaga linie și fiecare un pesmet separat:

Stilizarea pesmeturilor cu CSS:

Licență

Acest software poate fi utilizat gratuit sub licența MIT.

Etichete: Javascript

Un glisor simplu în javascript pur

Slider în pur javascript

Transcriere video

Dreapta
Stânga

#glisor (poziție: relativă; depășire: ascuns; lățime: 600px; înălțime: 320px; marjă: 20px automat; umplutură: 0; stil listă: niciunul;)
.slide (poziție: absolut; lățime: 100%; înălțime: 100%; tranziție: toate 1s ease-in 0,1s; stânga:0;)
.slide img (lățime: 100%;)
.săgeți (poziție: relativă; margine: 0 auto; lățime: 600px;)
.săgeată (poziție: absolută; cursor: indicator;)
.no_active (culoare: roșu;)
.next (dreapta: 0;)

script js:

var next = document.getElementById('next');
var brew = document.getElementById('prew');

var slides = document.getElementsByClassName('slide');
pentru(var i=0; i

Înapoi la listă

Din punct de vedere geografic, sunt situat în Sankt Petersburg, dar pot și sunt gata să lucrez cu toată lumea, indiferent de locația dvs.

Laborator foto

Îmi poți scrie prin formularul de feedback, sau mă poți contacta prin rețelele de socializare. Portofoliul il puteti vizualiza aici si aici.

Salutări, dragi prieteni!

101 glisoare și prezentări de diapozitive pentru un site web folosind Jquery CSS - superb, pur și simplu superb!

În acest scurt tutorial, vă voi arăta cum să creați o prezentare de diapozitive în cel mai simplu mod posibil!

O prezentare de diapozitive este o galerie javascript în care imaginile se schimbă automat după o anumită perioadă de timp.

În galeria noastră, atunci când schimbăm o imagine, vom folosi un mic efect și anume schimbarea transparenței imaginii!

Cod HTML simplu:

Totul este foarte simplu aici - plasăm prima imagine într-un bloc cu clasa de prezentare.

Și iată, de fapt, stilurile clasei menționate mai sus:

Setați lățimea și aliniați blocul la centru.

Acum să aruncăm o privire mai atentă și să analizăm codul javascript (Jquery):

În primul rând, este descrisă matricea_image care conține legături către imagini.

Dacă trebuie să adăugați, să ștergeți sau să modificați imaginile galeriei, atunci pur și simplu înlocuiți linkurile din această matrice - nu trebuie să schimbați nimic altceva!

Variabila image_num este folosită ca contor de imagine. Când ajungem la ultima imagine a matricei, resetam această variabilă pentru a începe din nou afișarea din prima imagine (facem o buclă).

luați o imagine dintr-un bloc cu clasa de prezentare;

faceți-l 40% transparent (acest lucru se întâmplă în 500 de milisecunde);

dupa aceea schimbam atributul src al imaginii (schimbam linkul catre imagine, luand-o din imagine_array);

apoi facem imaginea opaca (asta se intampla si in 500 de milisecunde).

După cum am spus deja, variabila image_num este un numărător, o comparăm cu lungimea matricei (adică cu numărul de imagini care participă la prezentarea de diapozitive) și dacă imagine_num este egală cu valoarea maximă, atunci o resetam; la zero.

Funcția de slide rulează la fiecare 3 secunde (3000 milisecunde) folosind un interval (setInterval), ceea ce înseamnă că imaginile vor derula la fiecare 3 secunde.

După cum puteți vedea, nu este nimic complicat!

Cu aceasta, această lecție despre javascript s-a încheiat, acum puteți privi exemplul demonstrativ, precum și fișierul sursă al lecției.

Atât, până la noi lecții, pa!

Dacă aveți nevoie de ajutor în crearea oricărei funcționalități, site web, serviciu, teste sau calculatoare, atunci sunt gata să vă ajut, mai multe detalii pe pagina de servicii.

1. Excelent prezentare jQuery

O prezentare mare, spectaculoasă, folosind tehnologii jQuery.

2. Pluginul jQuery „Scale Carusel”

Prezentare scalabilă folosind jQuery. Puteți seta dimensiunile de prezentare de diapozitive care vi se potrivesc cel mai bine.

3. Pluginul jQuery „slideJS”

Glisor de imagine cu descriere text.

4. Plugin „JSliderNews” 5. Slider CSS3 jQuery

Când treceți cu mouse-ul peste săgețile de navigare, apare o miniatură circulară a următorului diapozitiv.

6. Slider frumos jQuery „Ciclul de prezentare”.

Slider jQuery cu indicator de încărcare a imaginii. Este prevăzută schimbarea automată a diapozitivelor.

7. Pluginul jQuery „Parallax Slider”

Glisor cu efect volumetric de fundal. Punctul culminant al acestui glisor este mișcarea fundalului, care constă din mai multe straturi, fiecare derulând cu o viteză diferită. Rezultatul este o imitație a efectului volumetric. Arată foarte frumos, poți să vezi singur. Efectul este afișat mai ușor în browsere precum Opera, Google Chrome, IE.

8. Glisor jQuery proaspăt, ușor „bxSlider 3.0”

Pe pagina demo din secțiunea „exemple” puteți găsi link-uri către toate utilizările posibile ale acestui plugin.

9. Slider imagine jQuery, plugin „slideJS”.

Un slider jQuery elegant vă poate decora cu siguranță proiectul.

10. Plugin de prezentare jQuery „Easy Slides” v1.1

Un plugin jQuery ușor de utilizat pentru a crea prezentări de diapozitive.

11. Plugin jQuery Slidy

Plugin jQuery ușor în diferite versiuni. Este prevăzută schimbarea automată a diapozitivelor.

12. Galeria jQuery CSS cu schimbare automată a diapozitivelor

Dacă vizitatorul nu face clic pe săgețile „Înainte” sau „Înapoi” într-un anumit timp, galeria va începe să deruleze automat.

13. Slider jQuery „Nivo Slider”

Plugin foarte profesional, de înaltă calitate, ușor, cu cod valid. Există multe efecte diferite de tranziție de diapozitive disponibile.

14. Slider jQuery „MobilySlider”

Glisor proaspăt. Slider jQuery cu diverse efecte de schimbare a imaginii.

15. Pluginul jQuery „Slider²”

Glisor ușor cu schimbător automat de diapozitive.

16. Slider javascript proaspăt

Glisor cu schimbare automată a imaginii.

Plugin pentru implementarea prezentărilor de diapozitive cu schimbare automată a diapozitivelor. Este posibil să controlați afișajul folosind miniaturile imaginilor.

Slider de imagine CSS jQuery folosind pluginul NivoSlider.

19. Slider jQuery „jShowOff”

Plugin pentru rotația conținutului. Trei variante de utilizare: fără navigare (cu schimbare automată în format slide show), cu navigare sub formă de butoane, cu navigare sub formă de miniaturi de imagine.

20. Plugin „Shutter Effect Portfolio”.

Plugin jQuery proaspăt pentru proiectarea portofoliului unui fotograf. Galeria are un efect interesant de schimbare a imaginilor. Fotografiile se succed cu un efect asemănător cu funcționarea unui obturator pentru obiectiv.

21. Glisor CSS javascript ușor „TinySlider 2”

Implementarea unui slider de imagine folosind javascript și CSS.

22. Glisor minunat „Tinycircleslider”

Glisor rotund elegant. Tranziția între imagini se realizează prin glisarea cursorului sub forma unui cerc roșu în jurul circumferinței. Se va potrivi perfect în site-ul dvs. dacă utilizați elemente rotunde în designul dvs.

23. Glisor de imagine cu jQuery

Glisor ușor „Kit glisor”. Glisorul este disponibil în diferite modele: vertical și orizontal. De asemenea, sunt implementate diverse tipuri de navigare între imagini: folosind butoanele „Înainte” și „Înapoi”, folosind rotița mouse-ului, folosind clicul mouse-ului pe slide.

24. Galerie cu miniaturi „Kit Slider”

Galeria „Kit Slider”. Derularea miniaturilor se realizează atât pe verticală, cât și pe orizontală. Tranziția între imagini se realizează folosind: rotița mouse-ului, clicul mouse-ului sau trecând cursorul peste miniatură.

25. Slider de conținut jQuery „Kit Slider”

Glisor de conținut vertical și orizontal folosind jQuery.

26. Prezentare jQuery „Kit Slider”

Prezentare de diapozitive cu schimbare automată a diapozitivelor.

27. Glisor CSS3 javascript profesional ușor

Un slider jQuery și CSS3 îngrijit creat în 2011.

Prezentare de diapozitive jQuery cu miniaturi.

29. Prezentare jQuery simplă

Prezentare de diapozitive cu butoane de navigare.

30. Prezentare minunată de diapozitive jQuery „Skitter”.

Plugin jQuery Skitter pentru a crea prezentări de diapozitive uimitoare. Pluginul acceptă 22 (!) tipuri de efecte de animație diferite la schimbarea imaginilor. Poate lucra cu două opțiuni de navigare în diapozitive: folosind numerele de diapozitive și folosind miniaturi. Asigurați-vă că urmăriți demonstrația, o descoperire de foarte bună calitate. Tehnologii utilizate: CSS, HTML, jQuery, PHP.

31. Prezentare de diapozitive „Incomod”

Prezentare funcțională de diapozitive. Slide-urile pot fi: imagini simple, imagini cu subtitrări, imagini cu tooltips, videoclipuri. Puteți folosi săgețile, linkurile cu numerele diapozitivelor și tastele stânga/dreapta de pe tastatură pentru a naviga. Prezentarea de diapozitive vine în mai multe versiuni: cu și fără miniaturi. Pentru a vedea toate opțiunile, urmați linkurile Demo #1 - Demo #6 situate în partea de sus a paginii demo.

Un design foarte original pentru glisorul de imagine, care amintește de un ventilator. Tranziție animată de diapozitive. Navigarea între imagini se realizează cu ajutorul săgeților. Există, de asemenea, o schimbare automată care poate fi activată și dezactivată folosind butonul Redare/Pauză situat în partea de sus.

Glisor animat jQuery. Imaginile de fundal se scalează automat pe măsură ce fereastra browserului este redimensionată. Pentru fiecare imagine apare un bloc cu o descriere.

34. Slider „Flux Slider” folosind jQuery și CSS3

Slider nou jQuery. Mai multe efecte animate grozave la schimbarea diapozitivelor.

35. Plugin jQuery „jSwitch”

Galerie animată jQuery.

O prezentare jQuery ușoară cu schimbare automată a diapozitivelor.

37. Noua versiune a pluginului „SlideDeck 1.2.2”

Glisor de conținut profesional. Există opțiuni cu schimbare automată a diapozitivelor, precum și o opțiune care utilizează rotița mouse-ului pentru a vă deplasa între diapozitive.

38. Slider jQuery „Sudo Slider”

Glisor de imagine ușor folosind jQuery. Există o mulțime de opțiuni de implementare: schimbarea orizontală și verticală a imaginilor, cu și fără link-uri către numărul de diapozitive, cu și fără legende de imagine, diferite efecte de schimbare a imaginii. Există o funcție de schimbare automată a diapozitivelor. Link-uri către toate exemplele de implementare pot fi găsite pe pagina demo.

39. jQuery CSS3 slideshow

Prezentarea de diapozitive cu miniaturi acceptă modul de schimbare automată a diapozitivelor.

40. Slider jQuery „Flux Slider”

Glisor cu multe efecte de schimbare a imaginii.

41. Glisor jQuery simplu

Glisor de imagine elegant folosind jQuery.

Pentru unul dintre proiecte, aveam nevoie de un mic script de prezentare de diapozitive care arată imagini cu efect de dizolvare într-o buclă nesfârșită. Iată ce am primit. Mai întâi trebuie să pregătiți elementul de pagină HTML unde va avea loc toată această acțiune. Nu este nimic complicat aici, singurul lucru este că trebuie să setați imediat dimensiunea zonei: Acum să ne gândim la cum să facem un flux fluid al unei imagini în alta. Există diferite opțiuni, m-am hotărât pe următoarele. Două imagini sunt luate și suprapuse una peste alta. Apoi valoarea transparenței imaginii de sus se modifică folosind un temporizator, scăzând treptat până la complet transparent. Ca rezultat, vedem imaginea de jos prin cea de sus „topită”. La următoarea etapă, trebuie să schimbați imaginile, cea de jos merge în loc de cea de sus, iar următoarea din listă este încărcată în locul imaginii de jos. Pentru utilizator, această etapă va rămâne invizibilă, deoarece vede deja imaginea de fundal și browserul nu trebuie să o încarce de oriunde, iar noua imagine este situată sub cea vizibilă și procesul de încărcare a acesteia în timpul pauzei dintre cadru. schimbările rămân invizibile. Și după prima trecere a prezentării de diapozitive, toate imaginile vor fi preluate din memoria cache a browserului. În formă HTML, poziția inițială a prezentării de diapozitive va arăta cam așa:

< div style = "position: relative; height:600px; width:800px;" >

< img style = id = "sh_back" src = "img/02.jpg" >

< img style = "position: absolute; top:0px;" id = "sh_front" src = "img/01.jpg" >

Rămâne doar să punem teoria în practică. Prezentarea noastră de diapozitive este realizată în două etape repetate: o pauză între tranziții, când imaginea este afișată fără modificări și un ciclu care utilizează un efect de dizolvare. Mai mult, fiecare acțiune de la sfârșit o declanșează pe următoarea. Pentru fiecare etapă vom scrie propria noastră funcție în JavaScript.

var op = 1 ; // Transparență

var img_front = 1 ; // Indexul imaginii afișate

var img_back = 2 ; // Indexul imaginii de fundal

var img_total = 10 ; // Numărul total de imagini în rotație

// Funcție de modificare a transparenței imaginii afișate

funcția fade() (

// Opacitatea scade

op -= 0,1;

dacă (op< 0 ) {

// Imaginea este opaca

op = 1;

// Faceți următoarele poze

img_front++;

img_back++;

// Dacă totul este afișat, atunci reveniți la primul

if (img_front > img_total ) ( img_front = 1 ; )

if (img_back > img_total ) ( img_back = 1 ; )

// Setați imagini noi pe fundal și afișați

// Transparență pentru IE

tmp. stil. filtru = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)" ;

tmp. src = "img/" + img_front + ".jpg" ;

var tmp = document. getElementById("sh_back");

tmp. src = "img/" + img_back + ".jpg" ;

// Faceți o pauză între schimbarea imaginilor timp de 5 secunde

setTimeout("așteaptă()", 5000);

altceva(

// Setați o nouă valoare de transparență pentru imaginea de sus

var tmp = document . getElementById("sh_front");

// Transparență pentru browsere

tmp. stil. opacitate = op ;

// Transparență pentru IE

tmp. stil. filtru = "progid:DXImageTransform.Microsoft.Alpha(opacity=" +

Matematică. rotund (op * 100 )+ ")" ;

// Următoarea iterație a buclei de dezintegrare

setTimeout("fade()", 50);

// Funcție de declanșare a efectului de estompare

funcția în așteptare() (

decolorare();

Codul este destul de simplu, dar totuși unele puncte necesită explicații. Aceasta presupune că toate imaginile de prezentare de diapozitive au aceeași dimensiune, corespunzătoare dimensiunii zonei de prezentare, situată în folderul „img” și ordonate după nume, începând de la „1.jpg” la „10.jpg”. Căile și numele fișierelor pot fi diferite în proiectul dvs. Intervalul de întârziere dintre modificările cadrului este setat strict - 5000 milisecunde sau 5 secunde. Viteza unei iterații de dezintegrare este de 50 de milisecunde. Aceste valori pot fi micșorate sau crescute după cum este necesar. Mai rămâne doar să lansați prezentarea de diapozitive.

Dacă diapozitivele conțin doar imagini, puteți modifica ușor structura:

Anterioara Urmatoarea

Nu uitați să adăugați o valoare semnificativă atributului alt.

Pentru a utiliza link-urile paginilor, puteți face următoarele:

... ... ... 1 2 3

Anterior Următorul 1 2 3

Rețineți utilizarea atributelor „date” - unele expoziții de diapozitive pot insera imagini ca fundal, iar aceste atribute vor fi folosite în script ca locuri pentru a conecta fundalul și diapozitivul.

Utilizarea listelor O abordare corectă din punct de vedere semantic ar fi folosirea elementelor din listă ca diapozitive. În acest caz, structura va fi astfel:

Dacă ordinea diapozitivelor este bine definită (de exemplu, într-o prezentare), puteți utiliza liste numerotate

CSS Să începem cu următoarea structură:

Anterioara Urmatoarea

Deoarece Deoarece prezentarea se va desfășura de la dreapta la stânga, containerul exterior va avea o dimensiune fixă, iar cel interior va fi mai larg deoarece conține toate diapozitivele. Primul slide va fi vizibil. Acesta este setat prin overflow:

Slider ( lățime: 1024px; overflow: ascuns; ) .slider-wrapper ( lățime: 9999px; înălțime: 683px; poziție: relativă; tranziție: stânga 500ms liniar; )

Stilurile de ambalare interioară includ:

Latime mare
- inaltime fixa, inaltime maxima tobogan
- poziție: relativă, care vă va permite să creați mișcare de alunecare
- Tranziție CSS la stânga, ceea ce va face mișcarea lină. Pentru simplitate, nu am inclus toate prefixele. Puteți utiliza și transformări CSS (împreună cu traducerea) pentru aceasta.

Slide-urile au un atribut de flotare pentru a le face să se alinieze. Sunt poziționați relativ astfel încât să puteți obține offset-ul la stânga în JS. Îl folosim pentru a crea un efect de alunecare.

Slide (float: stânga; poziție: relativă; lățime: 1024px; înălțime: 683px; )

Deși am stabilit o anumită lățime, în script o putem modifica prin înmulțirea numărului de diapozitive cu lățimea diapozitivei. Nu știi niciodată de ce lățime ai putea avea nevoie.

Navigarea se realizează prin butoanele „Anterior” și „Următorul”. Le resetam stilurile implicite și le atribuim propriile noastre:

Slider-nav ( înălțime: 40px; lățime: 100%; margin-top: 1,5em; ) .slider-nav buton (chenar: niciunul; afișare: bloc; lățime: 40px; înălțime: 40px; cursor: indicator; text-indent : -9999em; background-color: transparent background-repeat: no-repeat ) .slider-nav button.slider-previous (float: left; background-image: url(previous.png); ). .slider-next ( plutitor: dreapta; imagine de fundal: url(next.png); )

Când utilizați link-uri de pagină în loc de butoane, puteți crea următoarele stiluri:

Slider-nav ( text-align: center; margin-top: 1.5em; ) .slider-nav a ( afișaj: inline-block; text-decoration: none; chenar: 1px solid #ddd; culoare: #444; lățime: 2em; înălțime: 2em; text-align: center .slider-nav.

Aceste clase vor fi alocate dinamic din script.

Această abordare este potrivită pentru efectul de alunecare. Dacă dorim să obținem efectul de fade-in, trebuie să schimbăm stilurile, deoarece float adaugă umplutură orizontală între diapozitive. Adică, nu avem nevoie de diapozitive pe o singură linie - avem nevoie de un „pachet” de diapozitive:

Slider ( lățime: 1024px; margine: 2em auto; ) .slider-wrapper ( lățime: 100%; înălțime: 683px; poziție: relativ; /* Creează un context pentru poziționare absolută */ ) .slide ( poziție: absolută; /* Poziționarea absolută a tuturor diapozitivelor */ lățime: 100% înălțime: 100% opacitate: 0 /* Toate diapozitivele sunt ascunse */ tranziție: opacitate 500ms liniar ) /* Inițial este vizibil doar primul; >
Folosim proprietatea opacitate pentru a ascunde diapozitive, deoarece cititoarele de ecran vor sări peste conținutul elementelor care au afișare: niciunul (vezi CSS în acțiune: conținut invizibil doar pentru utilizatorii de cititor de ecran).

Datorită poziționării contextuale CSS, am creat un „teanc” de diapozitive, ultimul diapozitiv din sursă fiind în fața celorlalți. Dar nu de asta avem nevoie. Pentru a menține ordinea diapozitivelor, trebuie să ascundem toate diapozitivele, cu excepția primei.

JS folosește tranziția CSS, schimbând valoarea proprietății de opacitate a diapozitivului curent și resetând această valoare la zero pentru toate celelalte.

Cod JavaScript Slideshow fără paginare Slideshow fără paginare funcționează făcând clic pe butoanele „Next” și „Previous”. Aceștia pot fi considerați ca operatori de creștere și decreștere. Există întotdeauna un indicator (sau un cursor) care va fi mărit sau micșorat de fiecare dată când apăsați butoanele. Valoarea sa inițială este 0, iar scopul este de a selecta slide-ul curent în același mod în care sunt selectate elementele matricei.

Deci, când facem clic pe Următorul prima dată, indicatorul crește cu 1 și obținem un al doilea diapozitiv. Făcând clic pe Previous, reducem indicatorul și obținem primul diapozitiv. etc.

Împreună cu indicatorul, folosim metoda jQuery .eq() pentru a obține diapozitivul curent. În JS pur arată astfel:

Funcție Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );

Amintiți-vă - NodeList folosește indecși la fel ca o matrice. O altă modalitate de a selecta diapozitivul curent este cu selectoare CSS3:

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = pointer + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

Selectorul CSS3:nth-child() numără elementele începând de la 1, așa că trebuie să adăugați un 1 la indicator. După selectarea unui diapozitiv, containerul său părinte trebuie mutat de la dreapta la stânga. În jQuery puteți folosi metoda .animate():

(funcție($) ( $.fn.slideshow = funcția(opțiuni) ( opțiuni = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... viteză: 500, easing : "liniar" ), opțiuni); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element).animate(( stânga : - $currentSlide.position().left ), options.speed, options.easing );

Nu există o metodă .animate() în JS obișnuit, așa că folosim tranziții CSS:

Slider-wrapper (poziție: relativă; // tranziție necesară: stânga 500 ms liniară; )

Acum puteți schimba proprietatea stângă în mod dinamic prin obiectul stil:

Acum trebuie să creăm un eveniment de clic pentru fiecare control. În jQuery puteți folosi metoda .on(), iar în JS pur puteți folosi metoda addEventListener().

De asemenea, trebuie să verificați dacă indicatorul a atins limitele listei - 0 pentru „Anterior” și numărul total de diapozitive pentru „Următorul”. În fiecare caz, trebuie să ascundeți butonul corespunzător:

(funcție($) ( $.fn.slideshow = funcția(opțiuni) ( opțiuni = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", anterior: ".slider-previous", următorul : ".slider-next", //... viteza: 500, easing: "linear" ), opțiuni var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( stânga: - $currentSlide.position().left), options.speed, options.easing var $element = $(this), $previous); = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length $next.on("click", function(; ) ( index++; $previous.show(); if(index == total - 1) (index = total - 1; $next.hide(); ) slideTo(index, $element); $previous.on("click ", function() (index--; $next.show(); if(index == 0) (index = 0; $previous.hide(); ) slideTo(index, $element));

Și în JS pur arată astfel:

Funcție Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper) "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider) -next"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; acțiuni: function() ( var self = this; self.next.addEventListener("click", function() (self.index++; self.previous.style. afișare = "blocare"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("click", function() ( self.next.style.display = "block"; if(self.index == 0) .index = 0; self.previous.style.display = „niciunul”; ) self._slideTo(self.index); ), fals); ) );

Prezentare paginată În acest tip de prezentare, fiecare link este responsabil pentru un diapozitiv, deci nu este nevoie de un index. Animațiile nu se schimbă felul în care utilizatorul se deplasează prin diapozitive. Pentru jQuery vom avea următorul cod:

(funcție($) ( $.fn.slideshow = funcția(opțiuni) ( opțiuni = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", viteza : 500, easing: "linear" ), opțiuni var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( stânga: - $currentSlide.position().left ), options.speed, options.easing ; return this.each(function() ( var $element = $(this), $navigationLinks = $( "a); ", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href") ); slideTo($a.addClass("curente" ));

În acest caz, fiecare ancoră corespunde ID-ului unui anumit slide. În JS pur, îl puteți folosi atât, cât și atributul de date, care stochează indexul numeric al slide-urilor în interiorul NodeList:

Funcție Slider(element) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav) a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), naviga: function() (pentru (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

Din IE10, puteți gestiona clase prin classList:

Link.classList.add("curent");

Și cu IE11, atributele de date pot fi obținute prin proprietatea setului de date:

Var index = parseInt(a.dataset.slide, 10) + 1;

Prezentări de diapozitive paginate cu controale Aceste prezentări de diapozitive prezintă o oarecare complexitate codului - trebuie să combinați utilizarea hashurilor de index și de pagină. Adică, diapozitivul curent trebuie selectat atât pe baza poziției indicatorului, cât și a diapozitivului selectat prin linkuri.

Acest lucru poate fi sincronizat prin indexul numeric al fiecărei legături din DOM. Un link - un diapozitiv, deci indicii lor vor fi 0, 1, 2 etc.

În jQuery, codul va fi astfel:

(funcție($) ( $.fn.slideshow = function(opțiuni) ( opțiuni = $.extend(( //... paginare: ".slider-pagination", //... ), opțiuni); $. fn.slideshow.index = 0; returnează this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // Index numeric DOM $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == total - 1) ( $.fn.slideshow.index = total - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. index, $element); $a.addClass("curent");

Puteți vedea imediat că vizibilitatea cursorului s-a schimbat - indexul este acum declarat ca o proprietate a obiectului de prezentare. În acest fel evităm problemele de domeniu care pot fi create de apeluri inverse în jQuery. Cursorul este acum disponibil peste tot, chiar și în afara spațiului de nume plugin, deoarece este declarat drept proprietate publică a obiectului slideshow.

Metoda .index() oferă indexul numeric al fiecărei legături.

Nu există o astfel de metodă în JS pur, deci este mai ușor să utilizați atributele de date:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector() ".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); ); this.navigationLinks = this.el.querySelectorAll(".slider-pagination a"); this.slides.length(); ( var self = this; //... for(var k = 0; k< self.navigationLinks.length; ++k) { var pagLink = self.navigationLinks[k]; pagLink.setAttribute("data-index", k); // Или pagLink.dataset.index = k; } }, //... }; })();

Acum putem conecta procedurile noastre cu referințe și folosim atributele de date pe care tocmai le-am creat:

Acțiuni: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "blocare"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "niciun "; ) else ( self.next.style.display = "blocare"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), fals); ) )

Înțelegerea dimensiunilor Să revenim la următoarea regulă CSS:

Slider-wrapper ( lățime: 9999px; înălțime: 683px; poziție: relativă; tranziție: stânga 500ms liniar; )

Dacă avem o mulțime de diapozitive, atunci 9999 poate să nu fie suficient. Trebuie să ajustați dimensiunile pentru diapozitive din mers pe baza lățimii fiecărui diapozitiv și a numărului de diapozitive.

În jQuery este simplu:

// Prezentare cu lățime completă returnează this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * total //... ));

Luați lățimea ferestrei și setați lățimea fiecărui diapozitiv. Lățimea totală a învelișului intern se obține prin înmulțirea lățimii ferestrei și a numărului de diapozitive.

// Prezentare cu lățime fixă returnează this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * total //... ));

Aici lățimea inițială este setată la lățimea fiecărui diapozitiv. Trebuie doar să setați lățimea totală a ambalajului.

Recipientul interior este acum suficient de larg. În JS pur, acest lucru se face aproximativ în același mod:

// Prezentare de diapozitive cu lățime completă Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length this.setDimensions(); .innerWidth || document.documentElement.clientWidth || var wrapperWidth * self.total;< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

Efecte de estompare Efectele de estompare sunt adesea folosite în prezentările de diapozitive. Slide-ul curent dispare și apare următorul. jQuery are metode fadeIn() și fadeOut() care funcționează atât cu opacitatea, cât și cu proprietățile de afișare, astfel încât elementul este eliminat din pagină când animația se termină (display:none).

În JS pur, cel mai bine este să lucrați cu proprietatea opacității și să utilizați stiva de poziționare CSS. Apoi inițial diapozitivul va fi vizibil (opacitate: 1), iar celelalte vor fi ascunse (opacitate: 0).

Următorul set de stiluri demonstrează această metodă:

Slider ( lățime: 100%; overflow: ascuns; poziție: relativă; înălțime: 400px; ) .slider-wrapper ( lățime: 100%; înălțime: 100%; poziție: relativă; ) .slide (poziția: absolut; lățime: 100 %; înălțime: 100%; opacitate: 0;

În JS pur, trebuie să înregistrați tranziția CSS a fiecărui diapozitiv:

Slide (float: stânga; poziție: absolut; lățime: 100%; înălțime: 100%; opacitate: 0; tranziție: opacitate 500 ms liniară; )

Cu jQuery, pentru a utiliza metodele fadeIn() și fadeOut(), trebuie să modificați opacitatea și afișarea:

Slide ( float: stânga; poziție: absolut; lățime: 100%; înălțime: 100%; afișaj: niciunul; ) .slider-wrapper > .slide:first-child (afișare: bloc; )

În jQuery codul este după cum urmează:

(funcție($) ( $.fn.slideshow = funcția(opțiuni) ( opțiuni = $.extend(( wrapper: ".slider-wrapper", anterior: ".slider-previous", următorul: ".slider-next" , slide: ".slide", nav: ".slider-nav", viteza: 500, easing: "linear" ), opțiuni var slideTo = function(slide, element) ( var $currentSlide = $(options.slides.); , element).eq(slide); $currentSlide.animate((opacity: 1), options.speed, options.easing).css("opacity", .. ))(jQuery);

Când animați opacitatea, trebuie să modificați și valorile acestei proprietăți pentru diapozitivele rămase.

În JavaScript ar fi:

Slideshow.prototype = ( //... _slideTo: function(slide) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

Elemente media: Video Putem include video într-o prezentare de diapozitive. Iată un exemplu de prezentare video de la Vimeo:

Videoclipurile sunt incluse prin iframe. Acesta este același bloc inline înlocuibil ca în imagine. Înlocuit – deoarece conținutul este preluat dintr-o sursă externă.

Pentru a crea o prezentare de diapozitive pe toată pagina, trebuie să modificați stilurile după cum urmează:

Html, corp ( margine: 0; umplutură: 0; înălțime: 100%; înălțime minimă: 100%; /* Înălțimea ar trebui să fie întreaga pagină */ ) .glisor ( lățime: 100%; depășire: ascuns; înălțime: 100 %; înălțime minimă: 100% /* Înălțime și lățime la maxim */ poziție: absolută */ .slider-wrapper ( lățime: 100%; /* Înălțime și lățime la maxim; */ poziție: relativă ) .slide ( float: stânga; poziție: absolut; lățime: 100%; înălțime: 100%; ) .slide iframe ( afișare: bloc; /* Element bloc */ poziție: absolut; /* Absolut pozitionare */ latime: 100% inaltime: 100% /* Inaltime si latime */ )

Prezentări automate de diapozitive Prezentările automate de diapozitive folosesc temporizatoare. De fiecare dată când funcția timer setInterval() este apelată înapoi, cursorul va fi incrementat cu 1 și astfel va fi selectat următorul diapozitiv.

Când cursorul atinge numărul maxim de diapozitive, acesta trebuie resetat.

Prezentările nesfârșite de diapozitive devin rapid plictisitoare pentru utilizatori. Cea mai bună practică este să opriți animația când utilizatorul trece cu mouse-ul peste ea și să o reluați când cursorul se îndepărtează.

(funcție($) ( $.fn.slideshow = funcția(opțiuni) ( opțiuni = $.extend(( slide: ".slide", viteza: 3000, easing: "liniar"), opțiuni); var timer = null; // Timer var index = 0; // Cursor var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animate ((opacity: 1), options.speed, options.easing css("opacity", 0 var autoSlide = function(element) ( // Inițializați secvența timer = setInterval() ( index++; //); Măriți cursorul cu 1 if(index == $(options.slides, element).length) ( index = 0; // Resetează cursorul ) slideTo(index, element ), options.speed ); ca în metoda.animate() ); var startStop = function(element) ( element.hover(function() ( // Opriți animația clearInterval(timer); timer = null; ), function () ( autoSlide(element) ; // Reluați animația )); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Ambii parametri ai metodei .stop() sunt setati la true, deoarece nu trebuie să creăm o coadă de animație din secvența noastră.

În JS pur, codul devine mai simplu. Înregistrăm o tranziție CSS pentru fiecare diapozitiv cu o anumită durată:

Slide (tranziție: opacitate 3s liniară; /* 3 secunde = 3000 milisecunde */ )

Și codul va fi așa:

Navigare cu tastatură Prezentările avansate de diapozitive oferă navigare prin tastatură, de ex. Derulați prin diapozitive apăsând tastele. Pentru noi, acest lucru înseamnă pur și simplu că trebuie să înregistrăm gestionarea evenimentului de apăsare a tastei.

Pentru a face acest lucru, vom accesa proprietatea keyCode a obiectului eveniment. Returnează codul tastei apăsate (lista de coduri).

Acele evenimente pe care le-am atașat la butoanele „Anterior” și „Următorul” pot fi acum atașate tastelor „stânga” și „dreapta”. jQuery:

$("corp").on("keydown", function(e) ( var cod = e.keyCode; if(code == 39) ( // Săgeată la stânga $next.trigger("click"); ) if( cod == 37) ( // Săgeată dreapta $previous.trigger("click"); ) ));

În JS pur, în loc de metoda simplă .trigger(), va trebui să utilizați dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var cod = e.keyCode; var evt = new MouseEvent("click"); // clic mouse-ul if(code == 39) ( // săgeată stânga self .next.dispatchEvent(evt ) if(code == 37) ( // Săgeată spre dreapta self.previous.dispatchEvent(evt); ) ), false);

În proiectele decente nu se obișnuiește să faci asta. Ar trebui să definim funcționalitatea care oferă răsturnare într-o metodă publică și apoi să o apelăm când se face clic pe butonul. Apoi, dacă o altă parte a programului ar trebui să implementeze această funcționalitate, nu ar fi nevoie să emulăm evenimentele DOM, ci ar putea pur și simplu apela această metodă.

Apeluri inverse Ar fi frumos să poți atașa un cod la orice acțiune de prezentare de diapozitive care ar fi executată atunci când acea acțiune este efectuată. Acesta este scopul funcțiilor de apel invers - ele sunt executate numai atunci când are loc o anumită acțiune. Să presupunem că prezentarea noastră de diapozitive are subtitrări și sunt ascunse în mod implicit. În momentul animației, trebuie să arătăm o legendă pentru diapozitivul curent sau chiar să facem ceva cu el.

În jQuery puteți crea un callback ca acesta:

(funcție($) ( $.fn.slideshow = function(opțiuni) (opțiuni = $.extend(( //... callback: function() () ), opțiuni); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacitate: 1 ), options.speed, options.easing, // Apel invers pentru slide-ul curent options.callback($ currentSlide)). frați (opțiuni.diapozitive).

În acest caz, callback-ul este o funcție din .animate() care ia diapozitivul curent ca argument. Iată cum îl puteți folosi:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent();); // Afișează legenda curentă și ascunde celelalte $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("lent" ));

În JS pur:

(funcție() (funcția Slideshow(element, callback) ( this.callback = callback || function()); // Apelul nostru this.el = document.querySelector(element); this.init(); ) Slideshow. prototip = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = this; var currentSlide = self.slides.style.opacity = 1;< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

Funcția de apel invers este definită ca al doilea parametru al constructorului. Îl poți folosi astfel:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow ("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Afișează legenda curentă și ascunde celelalte var allSlides = wrapper. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption");< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

API-uri externe Până acum scenariul nostru de lucru este simplu: toate diapozitivele sunt deja în document. Dacă trebuie să inserăm date în el din exterior (YouTube, Vimeo, Flickr), trebuie să populăm diapozitivele din mers pe măsură ce primim conținut extern.

Deoarece răspunsul de la serverul terță parte poate să nu fie imediat, trebuie să inserați o animație de încărcare pentru a arăta că procesul este în desfășurare:

Anterioara Urmatoarea

Poate fi un gif sau o animație CSS pură:

#spinner ( chenar-rază: 50%; chenar: 2px solid #000; înălțime: 80px; lățime: 80px; poziție: absolut; sus: 50%; stânga: 50%; margine: -40px 0 0 -40px; ) # spinner:după (conținut: ""; poziție: absolut; culoarea fundalului: #000; sus:2px; stânga: 48%; înălțime: 38px; lățime: 2px; chenar-rază: 5px; -webkit-transform-origin: 50% 97% transform-origine: 50% 97% -webkit-animation: unghiular 1s liniar infinit ) @-webkit-keyframes unghiular (-webkit-transform:rotate; ) );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes unghiular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before (conținut: ""; culoarea fundalului: #000; stânga: 48%; lățime: 2px; -webkit-transform-origin: ; transform-origin: 50% 94%; -webkit-animation: ptangular 6s liniar infinit; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg); ) 100%(transform:rotate(360deg);))

Pașii vor fi astfel:
- solicitați date din exterior
- ascunde bootloader-ul
- analizarea datelor
- construiți HTML
- afișați o prezentare de diapozitive
- procesează prezentari de diapozitive

Să presupunem că selectăm cele mai recente videoclipuri ale unui utilizator de pe YouTube. jQuery:

(funcție($) ( $.fn.slideshow = funcție(opțiuni) ( opțiuni = $.extend(( wrapper: ".slider-wrapper", //... încărcător: "#spinner", //... limită: 5, nume de utilizator: "learncodeacademy" ), opțiuni //... var getVideos = function() ( // Obțineți videoclipuri de pe YouTube var ytURL = "https://gdata.youtube.com/feeds/api/); videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Obțineți videoclipul ca obiect JSON $(options.loader). hide( ); // Ascunde înregistrările var de încărcare = videos.feed.entry var html = "";< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

În JavaScript pur există un pas suplimentar - crearea unei metode pentru obținerea JSON:

Atunci procedurile sunt similare:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector() ".slider-wrapper"); this.loader = this.el.querySelector("#spinner" //... this.username = "learncodeacademy"; callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() (daca ( request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // obiect JSON callback(data); ) else ( console. log(request.status); ), //... getVideos: function() ( var self = this; // Obțineți videoclipul YouTube var ytURL = "https://gdata.youtube.com/feeds/api /videos?alt=json&author=" + self.username + "&max-results=" + self.limit self._getJSON(ytURL, function(videos) ( // Obține videoclipul ca obiect JSON var entries = videos.feed.entry ; var html = ""; self.loader.style.display = „niciunul”; // Se ascunde încărcătorul pentru (var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки