HTML.

Odată cu dezvoltarea CSS3, layout-urile sunt în creștere exponențial. Din ce în ce mai funcțional pot fi implementate pe "Pure" CSS. Acest post arată procesul de dezvoltare. interactiv Slider ciclic fără o singură linie JavaScript. Rotație automată, selectarea oricărui diapozitiv cu o tranziție lină - pe "Pure" CSS. Exemplu în acțiune

Informații generale.

Standarde și prefixe

Proprietățile Tranziție, animație și transformare au fost implementate de mult timp în unul sau altul, implementat în toate browserele populare. La 6 iunie 2012, W3C a anunțat că această parte a standardului CSS 3.0 dezvoltat nu s-ar schimba dramatic și a recomandat să o implementeze astăzi tuturor browserelor.

Pentru dezvoltatorii din față, aceasta înseamnă apariția unui standard la care vă puteți baza. Acum nu este necesar să vă fie frică că în viitor orice browser va refuza proprietățile prefixului non-standard - deoarece va fi duplicată de o proprietate standard și va înlocui dacă este necesar.

Depășită versiunea pe Internet. Explorer, care va fi atribuit în curând chiar și la cea de-a 9-a versiune, nu acceptă tranziția, animația și transformarea în nici un fel. Dar cota lor depășește încă 10%. IE7-9 este oferită de JS- "Plug", iar efectul comutatorului neted între diapozitive nu este nimic.

De ce CSS, nu JS?

Există multe sarcini care pot fi rezolvate când ajutor CSS: Galerii interactive, meniuri de drop-down nivel multi-nivel, construirea și animarea diagramelor tridimensionale ... De ce să utilizați CSS când puteți face totul pe JS, în special în ceea ce privește masa de evoluții gata făcute? Principalele argumente pot fi astfel:

• În cele mai multe cazuri, Efecte CSS Lucrați mai repede, deoarece acestea sunt urmate exclusiv de browserele lor. Acest lucru este deosebit de bine vizibil pe dispozitivele mobile.
• Pentru a implementa sarcina, nu aveți nevoie de cunoștințe JS și în general niciun limbaj de programare. Editați CSS, de regulă, este de asemenea disponibil pentru un utilizator obișnuit. Și "lemn de foc fermecător" din CSS este mult mai complicat decât în \u200b\u200bJS.

Vânzări

BEM.

Deci, un modificator al elementelor de blocare a blocului (BEM) a fost utilizat pentru numirea claselor CSS. Linia de jos este că aspectul se bazează pe aspectul paginii din blocuri independente. Potrivit BEM, blocul poate avea elemente, dar numai în interiorul blocului.

Clase de cursuri:
.Slider / * bloc care conține bandă de imagine * / .Slider__Radio / * Radio Point * / * Butonul de includere al diapozitivului * / .slider__number-dupa / * este încorporat pentru a suporta IE7 și IE8, care nu acceptă Pseudo-elemente: după și, respectiv * / .slider_count_x / * Modificator Definirea numărului de diapozitive x * /

Animaţie

Secvența de animație pentru personalul cheie pentru trei diapozitive arată astfel:
@Keyframes Slider__ITEM-AUTOPLAY_COUNT_3 (0% (opacitate: 0;) 10% (opacitate: 1;) 33% (Opacitate: 1;) 43% (Opacitate: 0;) 100% (Opacitate: 0;))
Caracteristica implementării cursorului este că toate diapozitivele și toate butoanele sunt atribuite aceeași animație:
Slider_count_3 .Slider__Item, Slider_count_3 ;)
Această abordare vă permite să reduceți serios cantitatea de cod, deoarece toate animațiile trebuie să le duplicate cu versiuni de prefix (@ -Webkit-Keyframes, @ -Moz-Keyframes și @-Keyframes) și fiecare astfel de "stivă" Regulile trebuie descrise separat pentru fiecare număr de diapozitive necesare (de către client). Dacă descrieți și separat animația pentru fiecare diapozitiv, volumul codului poate fi zeci de kilobytes.

Pentru a evita acest lucru, dar animați în mod constant toate diapozitivele și butoanele folosind o animație, este suficient să setați pornirea animației în timp pentru fiecare pereche Slide + Button:
.Slider__ITEM: NTH-de tip (2), .slider__Number: nth-of-de-tip (2)\u003e Animație-întârziere: 5s; Animație-întârziere: 5s;) .Slider__ITEM: nth-of-de-tip (3), ; -Webkit-Animation-Întârzie: 10s; -O-animație-întârziere: 10s; Animație-întârziere: 10s;) ...
Pentru prima pereche, valoarea implicită rămâne - zero offset.

De asemenea, este important ca offsetul să nu depindă de numărul de diapozitive și poate fi descris o dată pentru cantitatea maximă.

Ca rezultat, tranziția animată netedă între diapozitive arată astfel:

Întrerupeți când plimbă cursorul

În cazul în care utilizatorul dorește să mențină diapozitivul pe ecran, dar nu doriți să opriți rotirea, puteți utiliza un mod de pauză pentru a vă deplasa peste diapozitivul:
.Slider: Hover .Slider__ITEM, .SLider: hover -Play-statare: întreruptă;)

Trecerea la Click.

Există o serie de "evenimente" CSS comutate elementul HTML.. Dacă vorbim despre clicul mouse-ului, atunci acesta este aspectul Pseudo-Class: Focus, țintă sau: verificat la unul dintre elementele paginii. Pseudo-Class: Focusul nu poate fi decât un element pe pagină la un moment dat; PSEUDO-CLASS: Țintă Litters Istoria browserului și necesită prezența etichetei "A"; Pseudo-Class: Verificați reamintește starea înainte de a părăsi pagina, plus, în cazul bazinelor radio, este un comutator discret atunci când poate fi selectat un singur element al unui anumit grup - ceea ce este necesar.
.Slider__Radio (stiluri nu sunt selectate Docks radio) .Slider__Radio: verificat (stiluri de radiocoptere selectate)

În selectoarele sub nivelul 4, comutați starea unui element arbitrar (de exemplu, o opacitate a diapozitivului) este posibilă numai într-un pachet cu un buton radio, cu ajutorul selectoarelor vecinilor + și ~. Puteți schimba atât stilurile vecinului, cât și stilurile descendenților vecinului, dar în orice caz vecinul ar trebui să fie după radiocoptere.
/ * Stilul primei diapozitive este "nu este selectat" * / .SLider__Radio: nth-of-de-tip (1) ~ .Slider__item: nth-of-tip (1) (opacitate: 0,0;) / * stilul Primul diapozitiv în starea "selectat" * / .slider__Radio: nth-of-de-tip (1): verificat ~ .SLider__ITEM: nth-of-de tip (1) (opacitate: 1.0;)
Se utilizează comutarea diapozitivului de opacitate, care conține o imagine. Aceasta este mai mult. universal moddecât comutarea proprietăților imaginii, deoarece într-un recipient DIV, spre deosebire de un element IMG gol, poate fi plasat informații suplimentare (de exemplu, numele diapozitivului sau descrierea asociată, inclusiv legăturile).
Pentru diapozitive, sunt indicate proprietățile de tranziție care vă permit să comutați între ele netedă.
.Slider__ITEM (-Moz-tranziție: Opacitate 0.2s Linear; -webit-tranziție: Opacitate 0.2s Linear;-tranziție: Opacitate 0.2s Linear; Tranziție: Opacitate 0.2s Linear;)

Stațiunea de rotație atunci când alegeți un diapozitiv

Când selectați un utilizator de orice diapozitiv, trebuie să opriți animația tuturor diapozitivelor și butoanelor. Acest lucru se datorează faptului că prioritatea valorilor proprietăților animației de funcționare sunt întotdeauna mai presus de toate celelalte valori ale acelorași proprietăți (puteți întrerup chiar și proprietățile inline cu importante).

De la animație, chiar dacă structura este aceeași, există fiecare diapozitiv și este necesar să opriți animația tuturor diapozitivelor (altfel tranzitie lina Trei diapozitive vor participa), toate canalele radio trebuie plasate înainte de primul diapozitiv.
...

Mai mult, toate butoanele (etichetele butonului radio) trebuie grupate într-o unitate separată și plasate după piscine radio, altfel pot apărea probleme cu poziționarea universală a etichetelor pentru un număr arbitrar de diapozitive.

Opriți animația tuturor diapozitivelor și a butoanelor atunci când alegeți orice diapozitiv este setat după cum urmează:
.Slider__Radio: verificat ~ .Slider__ITEM, .SLider__Radio: verificat ~ nici unul;)

Numărul de diapozitive arbitrare

Faceți un cursor universal sub orice număr de diapozitive este imposibil, deoarece pentru fiecare număr este nevoie de propriul "stivă" CSS-regulile de animație. Fiecare astfel de "stivă" (dacă este descris) poate fi conectat prin modificatorul unității de cursor:
.slider_count_x.
unde x este numărul de diapozitive.

Pentru a susține unele browsere vechi, primul diapozitiv nu este animat. Din acest motiv, recipientul primei imagini are o opacitate este întotdeauna egală cu 1,0. Există o problemă: cu o comutare fără probleme a altor două diapozitive între ele, primul este mutat (acesta poate fi părinte al părintelui blocului de cursor). Pentru a elimina efectul de transmisie, întârzierea întârzierii de tranziție este setată pentru toate diapozitivele, cu excepția celor selectate; Pentru cei selectați, indicele Z este instalat mai mult decât oricine altcineva:
.Slider__ITEM (Opacitate: 1.0; Poziție: Reluară; -Moz-tranziție: Opacitate 0.0s Linear 0.2s; -Webkit-tranziție: Opacitate 0.0s Linear 0.2s;-tranziție: Opacitate 0.0s Linear 0.2s; Tranziție: Opacitate 0.0s liniar 0.2s;) .Slider__Radio: nth-of-de-tip (1): verificat ~ .SLider__ITEM: nth-of-de tip (1), .slider__Radio: nth-of-tip (2): verificat ~ .SLider__ITEM: Nth-of-de-tip (2), .slider__radio: nth-of-de-de-tip (3): verificat ~ .SLider__ITEM: nth-of-de tip (3), .slider__Radio: nth-of-tip (4): verificat ~. Slider__ITEM: NTH-de-tip (4), .SLider__Radio: nth-of-de-tip (5): verificat ~ .SLider__ITEM: NTH-de-tip (5) (-Moz-tranziție: Opacitate 0.2s liniar; -Webkit tranziție : Opacitate 0.2s Linear; -o-tranziție: Opacitate 0.2s Linear; Tranziție: Opacitate 0.2s Linear; Z-Index: 6;)
Astfel încât diapozitivele nu intră în conflict cu alte elemente ale site-ului (de exemplu, nu au suprapus meniul derulant cu indicele Z mai puțin sau egal cu 6), creați propriul context (context de stivuire) pentru un bloc de conexiune este minim necesar pentru vizibilitate, z-index`a:
.Slider (z-index: 0;)

asa de

Deja astăzi, fără abilități de programare și biblioteci specializate, la standardizarea finală, CSS 3.0 vă permite să implementați sarcini complexe și interesante. Glisorul interactiv descris, în prezent, este pe deplin operațional în 80% din utilizatorii RUNET. Pentru majoritatea utilizatorilor rămași, și anume pentru utilizatorii browsere IE7-9, puteți utiliza js- "Plug", care implementează funcționalitatea principală a cursorului.

Exemplul de lucru poate fi văzut

3 martie 2015 la 18:15

Interesant și în același timp un simplu cursor pe pURE CSS.3

• Dezvoltarea site-ului,
• Css,
• HTML.

Nu voi deschide America nimănui, nu voi surprinde publicul cu un nou accent și nu-i vedem creierul pentru cei care înoată în CSS3 ca un aqualant. Vă voi spune o modalitate simplă de a crea un cursor folosind funcții simple CSS3 fără a fi nevoie să utilizați JavaScript.

1. Mișcarea fundației

Pentru a implementa cursorul, vom avea nevoie de un set destul de simplu de etichete, care, la rândul său, vor răspunde elementelor cursorului.

Aici vedem că blocul general "ambalaj" conține un bloc "glisor" cu 5 diapozitive, în interiorul care poate fi plasat orice cod HTML care va fi amplasat pe diapozitiv. Înainte de unitatea comună, există butoane radio, care vor fi ascunse ulterior pentru a crea propriul panou de navigare cu diapozitive cu care etichetele din blocul de control ne vor ajuta.

2. Efectuarea cursorului

Aici ne vom opri și vom considera puțin CSS. Vă rugăm să rețineți că pentru unele proprietăți, prefixele încrucișate sunt aplicate tuturor browsere moderne Le-ar putea înțelege.

* (Marja: 0; Hatding: 0; -Webkit-Box-Dimension: Border-cutie; -Moz-Dimensiune: cutie de frontieră; -O-Dimensiune: Border-cutie; Box-Dimension: Border-cutie; ) Corpul (imaginea de fundal: adresa URL (http://habrastorage.org/files/996/d76/d04/996d76d0410d422fa54cc433ce7ead2a.png);)
Cu designul fundalului și a stilurilor comune, totul este clar.

Înălțime (înălțime: 350px; Margine: 100px Auto 0; Poziție: Reluară: 700px;) .Slider (fundal-culoare: #ddd; Înălțime: moștenire; Overflow: Ascunse; Poziție: Reluară: moștenire; -Webkit -shadow: 0 0 20px RGBA (0, 0, 0, .5); -Moz-Box-umbra: 0 0 20px RGBA (0, 0, 0, .5); -O-Box-umbra: 0 0 20px RGBA (0, 0, 0, .5); Box-umbra: 0 0 20px RGBA (0, 0, 0 ,.5);)
Unitatea comună și blocul cu un cursor au aceleași dimensiuni pentru a monitoriza perfect poziția cursorului de pe pagină. În timp ce nu există diapozitive, glisorul pe care l-am pictat temporar în gri deschis.

Ambalaj\u003e intrare (afișaj: Nici unul;)
Butoanele radio se ascund. Vom avea nevoie de ele mai târziu.

Rezultatul acest moment astfel de:

3. Efectuarea diapozitivelor

Aici prezidim stilurile comune pentru diapozitive și fiecare diapozitiv separat:

Diapozitive: Absolut, Lățime: moștenire;) : //habrastorage.org/files/3e1/95D/C7F/3E195DC7F5A67469807F49A14F9807F49A14F97BO10E.jpg);) ;) .Slide4 (imagine de fundal: URL (http://habrastorage.org/files/e59/424/C04/E59424C046BE4DAB897D84AB015C87EA.JPG);). Fișiere / 53C / FF6 / C1C / 53CFFC6C1CAF842368C70B8EF892D8402.jpg);)
Pentru toate diapozitivele, am subliniat poziționarea absolută, astfel încât să puteți juca cu efectele aspectului. Dimensiunile diapozitivelor sunt preluate de la dimensiunea cursorului în sine, astfel încât acestea să nu fie prescrise în mai multe locuri.

4. Facem navigarea pe diapozitive

Deoarece butoanele radio sunt ascunse și avem nevoie ca întrerupătoare, elaborăm etichetele pregătite:

Wrapper Lățime: 8px; -Webkit-Radius-Radius: 50%; -Moz-Radius: 50%; -O-frontieră: 50%; Radius de frontieră: 50%;). (Frontieră: 2px solid #ddd; conținut: "" Afișaj: bloc; înălțime: 12px; stânga: -4px; poziție: absolut; sus: -4px; lățime: 12px; -Webkit-Radius: 50%; -moz-frontieră - Radius: 50%; -O-Frontieră-Radius: 50%; Raza de frontieră: 50%;)
Facem navigația clasică. Fiecare buton este o zonă sub formă de cerc, în interiorul care, cu un diapozitiv activ, o zonă goală este parțial pictată. Între timp, avem următorul rezultat:

5. Învățăm butonul pentru a face clic

Este timpul să învățați glisorul pentru a comuta diapozitive făcând clic pe un anumit buton:

Labelul de ambalaj (cursor: pointer; Afișaj: Inline-bloc; înălțime: 8px; margine: 25px 12px 0 16px; poziție: rudă: 8px; -Webkit-Radius: 50%; -Moz-Radius-Radius: 50%; %; - Radius la frontieră: 50%; Raza de frontieră: 50%; -Webkit-tranziție: Fundal Faxu-in-out .5S; -Moz-tranziție: Fundal Faine-in-out .5s; TRANSITION: Fundal Fundout-in-Out .5S; Tranziție: Fundal Faxu-out .5S;) Etichetă: Hover, # Slide1: verificat ~ .Controls etichetă: nth-of-tip (1), # Slide2: Verificat ~ .Controls etichetă: nth-of-de-de-de-tip ~ .Controls etichetă: nth-of-tip (3), # Slide4: verificat ~ .Controls etichetă: nth-of-de tip (4) # Slide5: verificat ~ .Controls etichetă: nth-of-tip (5) (fundal: #ddd;)
În butoanele de navigare, adăugați colorarea netedă în interiorul lor. Adăugați, de asemenea, condiții la care butonul activ și butonul pe care cursorul va fi colorat fără probleme. Butoanele noastre radio sunt gata:

6. Slider de inginerie

Ei bine, acum facem astfel că diapozitivele au trecut în cele din urmă:

Diapozitive (înălțime: moștenire; opacitate: 0; poziție: absolut; lățime: moștenire; z-index: 0; -Webkit-transformare: scară (1,5); -moz-transformare: scară (1,5); -O-transformare: scară (1,5); transformare: scară (1,5); -webit-tranziție: transformarea ușoare-in-out .5s, opacitate ușurință-in-out .5S; -Moz-tranziție: transformarea ușoare-în-out .5s, opacitate ușurință -În-out .5s; -O-TRANSITION: Transformarea ușurinței .5S, opacitate ușurință-in-out .5S; Tranziție: Transformarea ușoară-în-out .5S, Opacitate Fael-In-Out .5s; ) # Slide1: verificat ~ .SLider\u003e .slide1, # Slide2: verificat ~ .SLider\u003e .slide2, # Slide3: verificat ~ .SLider\u003e .Slider\u003e .Slide5 (opacitate: 1; z-Index: 1; -Webkit-transformare: scară (1); -moz-transformare: scară (1); -O-transformare: scară (1); transformare: scară ( Transforma: scară (una);)
Adăugam proprietăți în stiluri de diapozitive comune, în care toate diapozitivele devin invizibile și merg la fundal. De asemenea, am adăugat o ușoară creștere a diapozitivelor, în timp ce acestea sunt invizibile pentru a oferi un aspect interesant în cursor.

Rezultatul poate fi vizualizat aici.

CSS Sliders au un avantaj peste glisiere pe JavaScript. Unul dintre aceste avantaje este viteza de descărcare. Nu numai că sunt utilizate imagini pentru glisoare. dimensiuni mari (Dacă nu există optimizare pentru diferite ecrane), este de asemenea cheltuit pentru descărcarea de scripturi de ceva timp. Dar în articol veți vedea numai glisoarele pe CSS pur.

Asta am găsit pe site pe subiectul glisierelor:

1. CSS3 Slider Imagini

Glisorul pe CSS, care utilizează butonul radio pentru navigare. Aceste bazine radio sunt sub glisante. De asemenea, în plus față de piscinele radio, navigația este efectuată utilizând shooter-ul din stânga și la dreapta. Pentru a urmări ce imagine este afișată acum - sunt utilizate școli Pseudo-școlare: verificate.

2. CSS3 imagini glisor cu miniaturi

Spre deosebire de glisorul trecut pe CSS, aici, în loc de bazinele radio din partea de jos, sunt miniaturile tuturor imaginilor, care sunt, de asemenea, convenabile atunci când creați galeria de imagini. Imaginile sunt înlocuite cu un fel de efect: dispar fără probleme în timp ce crește.

3. Galerie pe CSS

Dar acest cursor pe CSS este perfect pentru vânzarea de pagini. De regulă, mulți dezvoltatori web în dezvoltarea de împrumuturi (vânzarea de pagini) plasează un cursor la început, astfel încât, în primul ecran (fără derulare), vizitatorul a văzut imediat toate beneficiile pe care le este pe această pagină. În plus, acest cursor este adaptiv, care, de asemenea, vă place.

4. CSS Slider fără legături

Imediat vreau să observ că acest cursor nu utilizează link-uri! În mod implicit, în plus față de imaginea principală (diapozitiv), încă 2 diapozitive sunt vizibile. Ele sunt situate în spatele celei principale. Schimbarea diapozitivelor are loc în modul frumos: În primul rând, cele două diapozitive sunt mutate și diapozitivul devine centrul, care va deveni cel principal. Apoi, diapozitivul crește și plasat înainte de restul.

5. Slider adaptiv pe CSS3

Un alt glisor adaptiv al cărui control se bazează pe radiocoptere. Pentru a vedea cum se va uita acest cursor diferite dispozitiveaH - Puteți schimba independent fereastra browserului, fie pe pagina glisantă Există pictograme speciale de dispozitive diferite, făcând clic pe care veți vedea, va arăta un cursor pe computer, tabletă sau pe un smartphone.

*** Bonus Slider ***

În plus față de toate glisoarele, care sunt prezentate mai sus, vreau să vă mulțumesc cu alta. Acest cursor este perfect pentru crearea galeriei de imagini. Cuvintele nu explică ceea ce face, deci este mai bine să urmăriți totul pe videoclip:

1. Excelent Slideshow JQuery

O diapozitive spectaculoase mari folosind tehnologii JQuery.

2. jQuery "scară carusel" plugin

Slideshow scalabil folosind jQuery. Puteți seta dimensiuni pentru slideshow-urile pe care le-ați potrivit.

3. jQuery Plug "Slidejs"

Un cursor de imagini cu o descriere a textului.

4. Plugin "JSLidernews"

5. CVS3 JQuery Slider

Când depuneți cursorul pe săgețile de navigație, apare o miniatură rotundă a următoarei diapozitive.

6. Cute JQuery Slider "Ciclul de prezentare"

jQuery Slider. Cu indicatorul de încărcare a imaginii. Există o schimbare automată de diapozitive.

7. JQuery Plugin "Parallax Slider"

Glisorul cu efect de fundal volumetric. Punctul culminant al acestui cursor în fundalul fundalului, care constă din mai multe straturi, fiecare dintre care este derulat cu diverse viteză. Ca rezultat, se dovedește imitarea efectului surround. Arată foarte frumos, vă puteți asigura despre asta. Efectul mai ușor este afișat în astfel de browsere ca: Opera, Google Chrome., Adică.

8. Slider proaspăt, Light JQuery "BxSlider 3.0"

Pe pagina demo din secțiunea "Exemple" puteți găsi linkuri către toate opțiuni posibile Utilizați acest plugin.

9. Glisorul de imagini JQuery, plugin "Slidejs"

Sliderul elegant JQuery va fi cu siguranță capabil să vă decoreze proiectul.

10. JQuery Plugin Slideshow "Diapozitive ușoare" v1.1

Ușor de utilizat plugin jQuery pentru a crea un spectacol de diapozitive.

11. Pluginul "JQuery Syly"

Plugin ușor JQuery în diferite design. Există o schimbare automată de diapozitive.

12. Galeria CSS jQuery cu modificarea automată a diapozitivului

Dacă vizitatorul într-un anumit timp nu apăsați săgețile "înainte" sau "spate", galeria va începe să derulați automat.

13. JQuery Slider "Nivo Slider"

Foarte profesionist de înaltă calitate plugin cu lumină cu cod valid. Există multe efecte diferite ale schimbării diapozitivelor.

14. JQuery Slider "Mobilyslider"

Slider proaspăt. JQuery Glisor cu diferite efecte ale schimbării imaginii.

15. JQuery Plugin "Slider²"

Slider ușor cu modificarea automată a diapozitivului.

16. Slider proaspăt JavaScript

Slider cu schimbare automată a imaginii.

Plugin pentru implementarea unei diapozitive cu o schimbare automată a diapozitivului. Este posibil să gestionați afișajul folosind miniaturi de imagini.

jquery css. Slider de imagine folosind pluginul Nivoslider.

19. Slider JQuery "Jshowoff"

Plugin pentru a roti conținutul. Trei opțiuni de utilizare: fără navigare (cu schimbare automată într-un format de prezentare de diapozitive), cu navigare sub formă de butoane, cu navigare în formă de imagini.

20. Portofoliul de protecție a declanșatorului

Fresh jQuery plugin pentru portofoliu de fotograf. Galeria a implementat un efect interesant al schimbării imaginilor. Fotografiile înlocuiesc reciproc cu efectul similar cu lucrarea obturatorului obiectivului.

21. Easy JavaScript CSS Slider "Tinyslider 2"

Implementarea cursorului de imagini cu folosind JavaScript și css.

22. Vânt de glisor TinyCirclesLider

Slider rotund elegant. Tranziția dintre imagini se realizează prin tragerea în jurul cursorului cercului ca un cerc roșu. Firma excelentă în site-ul dvs. Dacă sunteți în proiectare, utilizați elemente rotunde.

23. Glisorul de imagini pe jQuery

Easy Slider "Kit Slider". Glisorul este reprezentat în diferite modele: verticale și orizontale. De asemenea, a implementat diferite tipuri de navigație între imagini: Folosind butoanele "înainte" și "spate" folosind roata mouse-ului, utilizând click mouse-ul pe diapozitiv.

24. Galerie cu miniaturi "Slider Kit"

Galerie "Slider Kit". Scroll miniatura se efectuează atât în \u200b\u200bdirecția verticală, cât și în direcția orizontală. Tranziția dintre imagini se efectuează utilizând: Roți de șoarece, clicuri de mouse sau un cursor miniatural.

25. Glisorul de conținut Jet Slider Kit JQuery

Glisorul de conținut vertical și orizontal pe jQuery.

26. JQuery Slide Show "Slider Kit"

Slideshow cu modificarea automată a diapozitivului.

27. Easy Professional JavaScript CSS3 Slider

Un cursor NEAT pe JQuery și CSS3, creat în 2011.

jQuery Slideshow cu miniaturi.

29. Slideshow simplu jquery

Slideshow cu butoane de navigare.

30. Slideshow șocat JQuery "Skitter"

jQuery Plugin "Skitter" pentru a crea o diapozitive uimitoare. Pluginul suportă 22 (!) Vizualizare a diferitelor efecte de animație la schimbarea imaginilor. Poate funcționa cu două opțiuni de navigare pentru diapozitive: folosind numere de diapozitive și cu miniatură. Asigurați-vă că vă uitați la demonstrație, o descoperire foarte înaltă. Tehnologii folosite: CSS, HTML, JQuery, PHP.

31. Slideshow "ciudat"

Slideshow funcțional. În formă de diapozitive pot efectua: imagini simple, Imagini cu semnături, imagini cu sfaturi pop-up, clipuri video. Puteți utiliza săgeți, linkuri pentru numerele de diapozitive și tastele din dreapta / stânga de pe tastatură pentru a naviga. Slideshow se face în mai multe versiuni: cu miniaturi și fără ele. Pentru a vizualiza toate opțiunile, mergeți de-a lungul link-urilor Demo # 1 - Demo # 6 situat în partea de sus pe pagina demo.

Foarte original Design Glider Imagini asemănătoare ventilatorului. Schimbarea diapozitivului animat. Navigarea între imagini se efectuează folosind săgețile. De asemenea, oferă o schimbare automată care poate fi activată și dezactivată utilizând butonul PLAY / PAUSE situat în partea de sus.

Slider jquery animat. Imaginile de fundal sunt scalate automat când se modifică fereastra browserului. Pentru fiecare imagine plutește un bloc cu o descriere.

34. "Slider FLUX" pe jQuery și CSS3

Noul glisor JQuery. Mai multe efecte animate răcoroase la schimbarea diapozitivelor.

35. JQUERY "JSWITCH" plugin

Galeria de jquery animată.

Slideshow lumina pe jQuery cu modificarea automată a diapozitivului.

37. Noua versiune a pluginului "SlidenaDeck 1.2.2" "

Glisorul de conținut profesional. Opțiunile sunt posibile cu o schimbare automată a diapozitivului, precum și o opțiune utilizând o roată de mouse pentru tranziția între diapozitive.

38. JQuery Slider "Sudo Slider"

Slimea de imagine ușoară pe jQuery. Foarte multe opțiuni de implementare: schimbarea orizontală și verticală a imaginilor, cu legături către numărul de diapozitive și fără ele, cu semnături de imagini și fără diferite efecte ale schimbării imaginii. Există o funcție de schimbare automată a diapozitivului. Legăturile cu toate implementarea exemplară pot fi găsite pe pagina demo.

39. JQuery CSS3 Slideshow

Slideshow cu miniaturi acceptă modul de schimbare automată a diapozitivului.

40. JQuery "Flux Slider"

Glisorul cu mai multe efecte ale schimbării imaginii.

41. Simplu JQuery Slider

Slider de imagine elegant pe jQuery.

Vreau să spun o modalitate simplă de a crea un cursor, fără a utiliza JS, cu ajutorul animației CSS.

1) Pentru a începe cu, veți scrie HTML, să presupunem că 4 imagini vor fi înlocuite în cursor.

2) Apoi, punem dimensiunea blocului și mai multe setări, poziție: relativ este necesar pentru a crea un context de formatare, atunci va fi clar de ce.

Glisor (lățime: 500px; înălțime: 300px; margine: Auto, margine-top: 25px; margine: 1px negru solid; poziție: rudă; overflow: ascunsă;)
3) De asemenea, definim câteva proprietăți pentru diapozitivele în sine:

Glisați (lățime: 500px; înălțime: 300px; poziție: absolut; sus: 0; stânga: 0;)
După cum se poate vedea din CSS, punem toate diapozitivele din colțul din stânga sus al cursorului, specificând astfel aceeași poziție sursă.

1. Slide-ul este în poziția sursă, este demonstrat de utilizator.

2. Slide-ul se deplasează spre stânga până când se oprește complet cursorul în străinătate (glisorul este, de asemenea, indicat mai sus, deversă: respectiv, ascunse, respectiv, diapozitivul nu se execută la obiectele din jur).

5. Slide coboară un nivel cu un cursor

6. Slide se deplasează în poziția de pornire
Cu alte cuvinte (fotografii pentru moment, conform numărului din lista de mai sus):

@ Glisare aframes (de la (partea de sus: 0, stânga: 0;) 1 (Transformare: Traduceți (0px, 0px);) 2 (Transformare: Traduceți (-500px, 0); );) 4 (Transformare: Traduceți (500px, 300px);) 5 (Transformare: Traduceți (500px, 0);) la (transformare: (0px, 0px);))
5) Deci, a devenit clar ce arată calea diapozitivului. Fiecare diapozitiv "cercuri" în jurul recipientului este un cursor - și se întoarce la original. Astfel, putem răsuci infinit orice număr de diapozitive. Dar o singură nuanță a rămas, care este cel mai important lucru din această schemă - timp. Este necesar să calculați corect povestirea animației în timp și să setați întârzierea corectă pentru fiecare diapozitiv, astfel încât să nu fiți animați în același timp. Pentru a înțelege cum să setați întârzierea corectă și să calculați timpul de animație, am fost prezentat mai jos.

Să luăm denumirile de pași din punctul anterior și vom înțelege ce se întâmplă în fiecare pas. În esență, pașii numărul 1, 2 și 6 sunt acei pași în care diapozitivul intră în zona vizibilă. Din faptul că diapozitivele ar trebui să se miște în mod inextricabil și, așa cum au fost, se împinse reciproc de la cursor, se poate concluziona că durata pașilor 2 și 6 ar trebui să fie egală. Faceți imediat o rezervare că am reușit să lucrez cu succes acest design numai cu condiția ca durata primei etape să fie egală cu durata celei de-a 2-a și a 6-a. Ceea ce se întâmplă în timpul pașilor de 3,4 și 5 este în esență nevoii tehnice și pentru simplitate, să unim aceste trei pași în 1.

După simplificare, avem:

1. Pasul - glisorul este demonstrat pe sursă
2. Pasul - Sliderul se schimbă spre dreapta
3. Pasul - Glisorul face mișcări tehnice
4. Pasul - glisorul se schimbă spre stânga, revenind la poziția inițială

Pentru a asigura un incident la diapozitive, în momentul în care diapozitivul începe pasul 2, următorul diapozitiv trebuie să înceapă pasul 4.

Dacă timpul, cercul întregului animație este T;
Numărul de diapozitive - n;
Durata 3 pași - y;
Durata pașilor este de 1,2 și 4 - x;
Pasul de întârziere a animației pentru N-Slide - Z;
Atunci:

Y \u003d (100 * n - 150) / n;
x \u003d (100 - y) / 3;
X și Y trebuie să fie traduse în interes și apoi:
z \u003d 2 * x * t;

În cazul în care n \u003d 4, ca în exemplul de mai sus, obținem:

Al treilea pas - 62,5%, 1, 2 și 4 - 12,5%. O pasare de întârziere a animației pentru fiecare diapozitiv ulterior - 25%.

Ce intervale vor fi între etapele din al treilea pas - nu contează.

6) Acum că am numărat cu toții și știm toate valorile pot primi codul final.

Animaţie:

@Frames diapozitiv (de sus: 0, stânga: 0;) 12,5% (Transformare: Traduceți (0px, 0px);) 25% (Transformare: Traduceți (-500px, 0);) 36% (Transformare: Traducere (- 500px, 300px);) 37% (Transformare: Traduceți (500px, 300px);) 87,5% (Transformare: Traduceți (500px, 0);) la (transformare: (0px, 0px);))
Diapozitive:

Slide1 (fundal: URL (1.jpg); Animație-întârziere: 7.5s;) .Slide2 (fundal: URL (2.jpg); Animație-întârziere: 5s;) .slide3 (fundal: URL (3.jpg); Animație-întârziere: 2.5s;) .Slide4 (fundal: URL (4.jpg); Întârzierea animației: 0s;)
General CSS pentru toate diapozitivele:

Glisați (lățime: 500px; înălțime: 300px; poziție: absolut; Top: 0; stânga: 0; Animație-Nume: Slide; Animație-Durata: 10s; Funcția de animație-funcția: Linear; Animație-iteration-număr: Infinit; )
Aici, de fapt, totul! Mulțumită tuturor celor care citesc până la sfârșit.