HTML.

CSS3 arendamisega kasvavad paigutused eksponentsiaalselt. Rohkem ja rohkem funktsionaalsemat saab rakendada "Puhas" CSS-is. See postitus näitab arenguprotsessi. interaktiivne Tsükliline liugur ilma ühe rea JavaScriptita. Automaatne pöörlemine, mis tahes slaidi valik sujuva üleminekuga - on "Pure" CSS. Näide tegevuses

Üldine informatsioon.

Standardid ja eesliited

Omadused Üleminek, animatsioon ja teisendamine on ammu rakendatud ühes või teises, rakendanud kõigis populaarsetes brauserites. 6. juunil 2012 teatas W3C, et CSS 3.0 välja töötatud standardi osa ei muutu dramaatiliselt ja soovitas täna kõigile brauseritele rakendada.

Front-end arendajad, see tähendab välimus standard, millele saate tugineda. Nüüd ei ole vaja karta, et tulevikus keeldub iga brauser oma eesliide mittestandardsed omadused - kuna see dubleerib standardkinnisvara ja vajadusel asendada.

Aegunud interneti-versioon Explorer, mis varsti omistatakse isegi 9. versioonile, ei toeta üleminekut, animatsiooni ja muundumist mingil viisil. Kuid nende osakaal on endiselt üle 10%. IE7-9 pakutakse JS-"pistik" ja slaidide sujuva lülituse mõju ei ole midagi.

Miks CSS, mitte JS?

On palju ülesandeid, mida saab lahendada, kui cSS-i abi: Interaktiivsed galeriid, mitmetasandiline rippmenüüd, kolmemõõtmelise diagrammide ehitamine ja animatsioon ... Miks kasutada CSS-i, kui saate teha kõik JS-is, eriti arvestades valmis arengute massi? Peamised argumendid võivad olla sellised:

• Enamikel juhtudel, CSS-i mõju Töötage kiiremini, sest nende brausereid järgneb ainult nende brauserid. See on eriti hästi märgatav mobiilseadmetes.
• Ülesande rakendamiseks ei ole teil vaja teadmisi JS-i ja üldisi programmeerimiskeeli. CSS-i redigeerimine reeglina on saadaval ka tavalisele kasutajale. Ja "Charming Firewood" CSS-is on palju keerulisem kui JS-is.

Müük

Bem

Niisiis kasutati CSS-klasside nimetamiseks metoodika ploki elementide modifikaatorit (BEM). Alumine rida on see, et paigutus põhineb lehekülje paigutusel sõltumatutest plokkidest. BEM sõnul võib plokil olla elemente, kuid ainult ploki sees.

Liuguri klassid:
.slider / * plokk sisaldab pildilint * / .slider__Radio / * raadiopunkt * / .slider__ITEM / * Slide * / .slider__ITEM / * Pilt Slaidises * / .slider__Number-nimekiri / * Konteiner lülitamisnuppudega * / .slider__Number / * Kaasamise nupp assotsieerunud slaidi * / .slider__number-pärast / * on sisseehitatud toetama IE7 ja IE8, mis ei toeta pseudo-elemente: pärast ja :: pärast, vastavalt * / .slider_count_x / * modifikaator määratleda arvu Slaidid x * /

Animatsioon

Animatsioonjärjestus kolme slaidi võtmepersonali jaoks näeb välja selline:
@Keyframes Slider__Item-AutoPlay_Count_3 (0% (läbipaistmatus: 0;) 10% (läbipaistmatus: 1;) 33% (läbipaistmatus: 1;) 43% (läbipaistmatus: 0;) 100% (läbipaistmatus: 0;)
Liuguri rakendamise tunnusjoon on see, et kõik slaidid ja kõik nupud on määratud sama animatsiooniga:
Slider_count_3 .slider__Item, Slider_count_3 .slider__Number-pärast (-Moz-animatsioon: Slider__Item-Autoplay_count_3 15s lõpmatu; -MebKit-Animatsioon: Slider__Item-Autoplay_count_3 15s lõpmatu; ;)
Selline lähenemisviis võimaldab teil tõsiselt vähendada koodi kogust, sest kõik animatsioonid peavad neid veel dubleerima eesliide versioonidega (@ -webkit-võtmeframes, @ -moz-keyframes ja @ -o-keyframes) ja iga selline "stack" Reeglid tuleb eraldi kirjeldada iga nõutava slaidide arvu kohta eraldi (kliendi poolt). Kui te kirjeldate ka iga slaidi animatsiooni eraldi, võib koodi maht olla kümneid kilobaiti.

Selle vältimiseks, kuid järjekindlalt animeerivad kõik slaidid ja -nupud ühe animatsiooni abil, piisab selleks, et iga paari Slaid + nupu aja jooksul välja lülitada:
.slider__Item: NTH-of-Type (2), .slider__Number: NTH-tüüpi (2)\u003e .slider__Number-pärast (-Moz-animatsioon-viivitus: 5s; -Mebkit-animatsioon-viivitus: 5s; -O-- Animatsioon-Viivitus: 5s; Animatsioon-viivitus: 5s;) .slider__Item: NTH-tüüpi (3), .slider__Number: NTH-tüüpi (3)\u003e .slider__Number-pärast (-Moz-animatsioon-viivitus: 10s -Mebkit-animatsioon-viivitus: 10s; -O-animatsioon viivitus: 10s; animatsioon-viivitus: 10s;) ...
Esimese paari jaoks jääb vaikimisi väärtus - nulli nihe.

Samuti on oluline, et tasaarvestus ei sõltu slaidide arvust ja seda saab kirjeldada üks kord maksimaalse summa eest.

Selle tulemusena näeb välja slaidide vaheline sile animeeritud üleminek:

Paus kursori ümberpaigutamise ajal

Juhtum, kui kasutaja soovib ekraanil slaidi hoida, kuid ei taha pöörlemist välja lülitada, saate kasutada pausi režiimi libisemiseks üle slaidi üle:
.slider -Play-olekus: peatatud;)

Klõpsake nuppu Switching

On mitmeid CSS-i sündmusi " html element. Kui me räägime hiireklõpsuga, siis on see pseudo-klassi välimus: fookus ,: sihtmärk või: kontrollitud ühe lehekülje elementi. Pseudo-klass: fookus võib korraga mitte rohkem kui üks element; Pseudo-klass: Sihtplaatide sihtmärk brauseri ajalugu ja nõuab sildi "A" olemasolu; Pseudo-klass: kontrollitud mäletab tingimusest enne lehekülje lahkumist, pluss, raadioühingute puhul on diskreetne lüliti, kui saab valida ainult ühe konkreetse rühma elementi - mida vajatakse.
.slider__radio (stiilid ei ole valitud raadio dokid) .slider__radio: kontrollitud (valitud radioptide stiilid)

Valijates alla 4, lülitage suvalise elemendi seisund (näiteks slaidi läbipaistmatus) võimalik ainult raadio nupuga kimpis, naabrite valikute abil ja ~. Nii naabri stiili ja naabri järeltulijate stiili saate vahetada, kuid igal juhul peaks naaber olema pärast radiokiipe.
/ * Esimese slaidi stiil on "Ei ole valitud" * / .slider__radio: NH-tüüpi (1) ~ .slider__Item: NH-tüüpi (1) (läbipaistmatus: 0,0;) / * stiil Esimene slaid riik "Valitud" * / .slider__radio: NTH-OF-tüüpi (1): kontrollitud ~ .slider__Item: NH-tüüpi tüüp (1) (läbipaistmatus: 1,0;)
Läbipaistmatuse slaidi vahetamist kasutatakse, mis sisaldab pilti. See on rohkem universaalne viiskui pildi omaduste vahetamine, sest div konteiner, erinevalt tühja IMG elementi, saab paigutada mis tahes lisainformatsioon (Näiteks slaidi nimi või sellega seotud kirjeldus, sealhulgas lingid).
Slaidide jaoks on näidatud ülemineku omadused, mis võimaldavad teil nende vahel vahetada sujuvalt.
.slider__item (-Moz-üleminek: läbipaistmatus 0,2S lineaarne; -webkit-üleminek: läbipaistmatus 0,2s lineaarne; -O-üleminek: läbipaistmatus 0,2s lineaarne; üleminek: läbipaistmatus 0.2s lineaarne;)

Slaidi valimisel peatub pöörlemispeatus

Kui valite mis tahes slaidi kasutaja, peate peatama kõigi slaidide ja nuppude animatsiooni. See on tingitud asjaolust, et peamise animatsiooni omaduste väärtuste prioriteet on alati kõrgemal kui samade omaduste muud väärtused (saate katkestada isegi inline omadused! Tähtis`OM).

Alates animatsioonist, isegi kui struktuur on sama, siis on iga slaid ja kõikide slaidide animatsioon välja lülitada (teisiti sujuv üleminek Osalevad kolm slaidit), kõik raadiojaamad tuleks paigutada enne esimest slaidi.
...

Veelgi enam, kõik nupud (raadionuppmärgised) tuleb rühmitada eraldi seadmesse ja paigutatakse pärast raadioühinguid, muidu võivad tekkida probleemid silte universaalse positsioneerimisega slaidide meelevaldse arvu positsioneerimisel.

Kõigi slaidide ja nuppude peatamine Slaidi valimisel on järgmine:
.slider__Radio: kontrollis ~ .slider__Item, .slider__Item: kontrollitud ~ .slider__Number-nimekiri\u003e .slider__Number-loetelu\u003e Pärast (läbipaistmatus: 0,0; -Moz-animatsioon: mitte; Mitte ükski;)

Suvalise numbri slaidid

Tehke universaalne liugur mis tahes arvu slaidide all on võimatu, sest iga numbri puhul on see oma "Stack" CSS-reeglid animatsiooni reeglid. Iga selline "stack" (kui kirjeldatud) saab ühendada liuguri seadme modifikaatori kaudu:
.slider_count_x.
kus x on slaidide arv.

Et toetada mõningaid vanu brausereid, ei ole esimene slaid animeeritud. Sel põhjusel konteiner esimese pildi on läbipaistmatus on alati võrdne 1,0. On probleem: kahe teise slaidi sujuva üleminekuga omavahel on esimene nihkunud (see võib olla liuguri vanema vanem). Edastamise efekti eemaldamiseks määratakse ülemineku hilinemise viivitus kõigi slaidide jaoks, välja arvatud valitud valitud; Valitud Z-indeks on paigaldatud rohkem kui keegi teine:
.slider__Item (läbipaistmatus: 1.0; seisukoht: suhteline; -Moz-üleminek: läbipaistmatus 0,0s lineaarne 0,2S; -Webkit-üleminek: läbipaistmatus 0,0s lineaarne 0,2S; -O-üleminek: läbipaistmatus 0,0s lineaarne 0.2 0,0s lineaarne 0,2S;) .slider__radio: NTH-OF-tüüpi (1): kontrollitud ~ .slider__Item: NH-tüüpi (1), .slider__radio: NTH-OF-tüüp (2): kontrollitud ~ .slider__ITEM: NTH-of-tüüpi (2), .slider__radio: NTH-of-tüüp (3): kontrollitud ~ .slider__ITEM: NH-tüüpi (3), .slider__radio: NTH-OF-tüüp (4): kontrollitud ~. Slider__Item: NTH-OF-tüüpi (4), .slider__radio: NTH-tüüpi (5): kontrollitud ~ .slider__ITEM: NH-tüüpi (5) (-Moz-üleminek: läbipaistmatus 0,2S lineaarne; -Mebkit üleminek : Läbipaistmatus 0,2s lineaarne; -O-üleminek: läbipaistmatus 0,2s lineaarne; üleminek: läbipaistmatus 0,2s lineaarne; z-indeks: 6;)
Nii et slaidid ei ole vastuolus koha saidi teiste elementidega (näiteks ei katnud rippmenüü Z-indeksiga vähem kui 6-ga), looge oma konteksti (virnastamise kontekst) on minimaalselt vajalik nähtavuse, z-indeksi jaoks:
.slider (Z-indeks: 0;)

nii

Juba tänapäeval, ilma programmeerimisoskuste ja spetsialiseeritud raamatukogudeta, võimaldab CSS 3.0-le lõplikule standardimisele rakendada keerulisi ja huvitavaid ülesandeid. Praegu on kirjeldatud interaktiivne liugur töötab täielikult 80% run kasutajatest. Enamiku järelejäänud kasutajate, nimelt IE7-9 brauserite kasutajatele, saate kasutada JS-pistikut, mis rakendab liuguri peamist funktsionaalsust.

Näidet võib näha

3. märts 2015 kell 18.15

Huvitav ja samal ajal lihtne liugur puhas CSS.3

• Veebisaidi arendamine,
• CSS,
• HTML.

Ma ei avane Ameerikat kellelegi, ma ei üllata avalikkust uue fookuse ja ei lõikes aju neile, kes ujuvad CSS3 kui Aqualant. Ma ütlen teile lihtsa viisi liuguri loomiseks lihtsate CSS3 funktsioonide abil, ilma et oleks vaja kasutada JavaScripti.

1. Sihtasutuse liikumine

Liuguri rakendamiseks vajame üsna lihtsat silte, mis omakorda reageerivad liuguri elementidele.

Siin näeme, et üldine "ümbris" plokk sisaldab "liugurit" ploki 5 slaidiga, sees, mis saab paigutada mis tahes HTML-koodi, mis paikneb slaidil. Enne ühist üksust on raadionupud, mis hiljem peituvad, et luua oma slaidi navigatsiooniseade, millega juhtimisseadis olevad sildid aitavad meid.

2. Liuguri väljatöötamine

Siin peatame ja kaalume vähe CSS-i. Pange tähele, et mõnede omaduste puhul kinnitatakse risti brauseri eesliited kõigile kaasaegsed brauserid Võiks neid mõista.

* (Marginaal: 0; polsterdamine: 0; -Webkit-box suuruse suurus: Border-kasti; -Moz-Box-suurusega: piirkasti; -O-Box-suurusega: Border-Box; Box suurusega: Border-Box; ) Keha (taustapilt: URL (http://habrastorage.org/files/996/D76/D04/996D76D0410D422FA54CC433CEAAD2A.png););
Tausta ja jagatud stiilide kujundusega on kõik selge.

Wrapper (kõrgus: 350px; marginaal: 100px auto 0; positsioon: suhteline; laius: 700px;) .slider (taustvärv: #ddd; kõrgus: pärimine; ülevool: peidetud; asend: laius; laius; -Shadow: 0 0 20PX RGBA (0, 0, 0, 0,5); -Moz-box-vari: 0 0 20PX RGBA (0, 0, 0, 0,5); -o-kasti vari: 0 0 20px RGBA (0, 0, 0, 0,5); kasti vari: 0 0 20PX RGBA (0, 0, 0, 0,5);)
Ühises üksuses ja plokis liuguriga on samad mõõtmed, et suurepäraselt jälgida lehekülje liuguri positsiooni. Kuigi seal ei ole slaidid, liugur me ajutiselt värvitud helehalli.

Wrapper\u003e Sisend (ekraan: ükski);)
Raadio nupud Peida. Me vajame neid hiljem.

Tulemus sel hetkel selline:

3. Slaidide tegemine

Siin me presideerime tavalised stiilid slaidide ja iga slaidi eraldi:

Slaidid: absoluutne; laius: pärand;) : //habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f9807f49a14f97ba0e.jpg);) .slide3 (Taust-pilti: URL (http://habrastorage.org/files/663/6b1/ d4f /.jpg) ;) .sLide4 (taustapilt: URL (http://habrastorage.org/files/e59/424/c04/e59424C046BE4DAB897D84AB015C87EA.JPG);) .sLide5 (taustapildi: URL (http: //habrastorage.org/ Failid / 53C / FF6 / C1C / 53CFF6C1CAF842368C70B8EF892D8402.jpg);)
Kõigi slaidide jaoks märkisime absoluutse positsioneerimise, et saaksite mängida välimuse mõjuga. Slaidide mõõtmed võetakse liuguri suurusest nii, et neid ei tohiks määrata mitmele kohale.

4. Teeme slaidide navigatsiooni

Kuna raadio nupud on peidetud ja me peame lülititena, koostame valmis sildid:

Wrapper .Kontrollitud (vasakul: 50%; marginaal-vasak: -98px; Asukoht: Absoluutne;) .Wrapper etikett (kursor: kursor; ekraan: inline-plokk; kõrgus: 8px; marginaal: 25px 12px 0 16px; positsioon: sugulane; Laius: 8px; -webkit-Border-raadius: 50%; -Moz-piiriraadius: 50%; -O-Border-raadius: 50%; piiriraadius: 50%;). 2PX tahke #ddd; sisu: "" Ekraan: plokk; kõrgus: 12px; vasakule: -4px; asend: Absoluutne; Top: -4px; laius: 12px; -Mebkit-border-raadius: 50%; -moz-border - Raadius: 50%; -O-Border-raadius: 50%; piiriraadius: 50%;)
Teeme navigatsiooni Classic. Iga nupp on ringi kujul ringi kujul, mis sees, mis aktiivne slaidi, tühi ala on osaliselt värvitud. Vahepeal on meil järgmine tulemus:

5. Me õpime nuppu, et klõpsata

On aeg õpetada liugurit slaidide vahetamiseks, klõpsates konkreetses nupul:

Wrapper etikett (kursor: kursor; kuvamine; ekraan: inline-plokk; kõrgus: 8px; marginaal: 25px 12px 0 16px; asend: sugulane; laius: 8px; -Mebkit-border-raadius: 50%; -moz-border-raadius: 50 %; -O-Border-raadius: 50%; piiriraadius: 50%; -webkit-üleminek: tausta kergesti välja lülitatud .5s; -Moz-üleminek: tausta kergesti välja lülitatud .5s; -O-- Üleminek: taustmuutus-välja .5s; üleminek: tausta kergesti-väljaandes .5s;) .wrapper Märksõnad: hover, # Slide1: kontrollitud ~ .Kontroll Märksõnad: NH-tüüpi (1), # Slide2: Slide2 Kontrollitud ~ .Kontrollitud märgised: NTH-OF-tüüpi (2), # Slide3: kontrollitud ~ Of-tüüpi Märgistus: NTH-OF-tüüpi (3), # Slide4: kontrollitud ~. Kontrolleri märgis: NH-tüüpi (4) # Slide5: kontrollitud ~ .Kontrolli märgis: NTH-OF-tüüp (5) (taust: #ddd;)
Navigeerimisnupeldes lisage nende sees sile värvimine. Lisage ka tingimused, millega aktiivne nupp ja nupp, kus kursor on sujuvalt värvitud. Meie enda raadio nupud on valmis:

6. Engineering liugur

Noh, nüüd me teeme nii, et slaidid lõpuks vahetasid:

Slaidid (kõrgus: pärida; läbipaistmatus: 0; positsioon: Absoluutne; Laius: pärimine; Z-indeks: 0; -Mebkit-transformation: skaala (1,5); (1,5); transformatsioon: skaala (1,5); -webkit-üleminek: transformatsiooni kergesti välja lülitatud .5s, läbipaistmatus range-in-out .5s; -Moz-üleminek: transformatsiooni lihtsus .5s, läbipaistmatus -In-out .5s; -O-üleminek: transformeerida kergesti välja lülitatud .5s, läbipaistmatus kergelt välja in-out .5s; üleminek: muutuste lihtsus .5s, läbipaistmatus kergelt-sisse-välja .5s; ) # Slide1: kontrollitud ~ .slider\u003e .sLide1, # Slide2: kontrollitud ~ .slider\u003e .slide2, # Slide3: kontrollitud ~ .slider\u003e .slide5 (läbipaistmatus: 1; Z-indeks: 1; -WebKit-transformation: skaala (1); -Moz-transformatsioon: skaala (1); -O-transformatsioon: skaala (1); Transform: skaala (üks);)
Me lisame ühiste slaidide stiilide omadusi, kus kõik slaidid muutuvad nähtamatuks ja minge taustale. Samuti lisasime slaidide kerge suurenemise, samas kui need on nähtamatud, et anda liuguri huvitava välimuse.

Tulemuseks saab siin vaadata.

CSS liugurid on mõned eelise üle liugurid JavaScript. Üks neist eelistest on allalaadimise kiirus. Kasutatakse ainult liugurite pilte. suured suurused (Kui erinevatele ekraanidele ei ole optimeerimist), kulub see ka skriptide allalaadimiseks mõnda aega. Kuid artiklis näete ainult puhta CSS-i liugureid.

Seda ma leidsin saidil liugurite teemal:

1. CSS3 liuguri pildid

CSS-i liugur, mis kasutab raadio nuppu slaidid navigeerimiseks. Need raadio basseinid on liugurite all. Lisaks raadio basseinidele viiakse navigeerimine läbi vasaku ja paremale laskja abil. Selle pildi kuvamise jälgimiseks kasutatakse pseudokoole: kontrollitud.

2. CSS3 liugur pilte miniatuuridega

Erinevalt CSS-i minevikust liugurist on siin allosas raadio basseinide asemel kõikide piltide pisipildid, mis on ka pildigalerii loomisel mugav. Pildid asendatakse mingi mõjuga: suurendades sujuvalt suurendades.

3. Galerii CSS-is

Kuid CSS-i liugur on ideaalne lehekülgede müümiseks. Reeglina paljud veebiarendajad laenude arendamisel (müügilehtede) asetage liugur juba alguses, nii et esimeses ekraanil (ilma kerimiseta) nägi külastaja kohe kõik sellel lehel. Lisaks sellele on see liugur adaptiivne, mis ka meeldib.

4. CSS liugur ilma linkideta

Kohe ma tahan märgata, et see liugur ei kasuta linke! Vaikimisi on lisaks peamisele pildile (slaid), veel 2 slaidi nähtavat. Nad asuvad peamise taga. Slaidide muutus esineb ilusas režiimis: kõigepealt liigutatakse kaks slaidi ja slaid muutub keskele, mis seejärel muutub peamiseks. Siis slaid suureneb ja paigutatakse ees ülejäänud.

5. Adaptive liugur CSS3

Teine adaptiivne liugur, mille juhtimine põhineb radioktsioonidel. Et näha, kuidas see liugur vaatab erinevad seadmedah - saate kas brauseri akenist sõltumatult muuta või liuguri leheküljel on erineva seadmete erilised ikoonid, klõpsates teie arvutis, tablett või nutitelefoni liugur.

*** Boonus Slider ***

Lisaks kõigile ülaltoodud liuguritele tahan ma teile teise. See liugur sobib ideaalselt pildigalerii loomiseks. Sõnad ei selgita, mida ta teeb, nii et see on parem vaadata kõike video:

1. Suurepärane jquery slaidiseanss

Suur suurejooneline slaidiseanss Jquery tehnoloogiate abil.

2. JQuery "Scale Carousel" plugin

Skaalautuva slaidiseansi kasutamine jquery abil. Kõige sobivamate slaidiseansi jaoks saate määrata suurusi.

3. JQuery pistik "Spmelijs"

Liugur pilte teksti kirjeldus.

4. Plugin "jsliderNews"

5. CSS3 jquery liugur

Kui liigutate kursor navigeerimisnooledest, ilmub järgmise slaidi ümmargune pisipilt.

6. Armas jquery liugur "esitlustsükkel"

jQuery liugur Pildi laadimise indikaatoril. Seal on automaatne slaidi muutus.

7. JQuery plugin "Parallax liugur"

Liugur koos mahulise taustaga. Selle liuguri esiletõstmine tausta taustal, mis koosneb mitmest kihist, millest igaüks keritakse erineva kiirusega. Selle tulemusena selgub alturi mõju imitatsiooniks. See tundub väga ilus, saate selle kohta veenduda. Sellistes brauserites kuvatakse sujuvam efekt: ooper, Google Chrome., St.

8. Värske, kerge Jquery liugur "BXSLIDER 3.0"

Demo lehel "Näidete" sektsioonis leiate linke kõigile võimalikud võimalused Kasutage seda pluginat.

9. JQuery liugur pilte, plugin "Spmelijs"

Stiilne Jquery liugur on kindlasti oma projekti kaunistamiseks.

10. JQuery plugin slaidiseanss "Lihtne slaidid" v1.1

Lihtne kasutada jquery plugina, et luua slaidiseansi.

11. Plugin "jquery slaidy"

Lihtne jquery plugin erineva disainiga. Seal on automaatne slaidi muutus.

12. Jquery CSS Galerii, millel on automaatne slaidimuutus

Kui külastaja teatud aja jooksul ei vajuta "edasi" või "tagasi" nooli, hakkab galerii automaatselt kerida.

13. JQuery liugur "Nivo Slider"

Väga professionaalne kvaliteetne valgus plugin koos kehtiv kood. Slaidide muutus on palju erinevaid mõjusid.

14. JQuery liugur "Mobilyslider"

Värske liugur. JQuery liugur erinevate mõju pilt muutus.

15. Jquery plugin "Slider²"

Lihtne liugur automaatse slaidi muutusega.

16. Värske JavaScripti liugur

Liugur automaatse pildi vahetusega.

Plugin slaidiseansi rakendamiseks automaatse slaidimuutusega. Ekraani on võimalik pilte pisipiltide abil hallata.

jquery CSS. Pildi liugur kasutades Nivoslideri pluginat.

19. JQuery Slider "Jshowoff"

Sisu pööramiseks plugin. Kolm võimalust kasutamiseks: ilma navigeerimiseta (automaatse nihutamisega slaidiseansi formaadis), navigeerimisega nuppe kujul, navigeerimise kujul kujutiste kujul.

20. Katiku efekti portfelli plugin

Värske Jquery plugin fotograafiportfelli jaoks. Galerii rakendas piltide muutmise huvitavat mõju. Fotod asendavad üksteist objektiivi katiku tööga sarnase toimega.

21. Lihtne JavaScript CSS Slider "Tinyslider 2"

Piltide liuguri rakendamine koos javaScripti kasutamine ja CSS.

22. Tinycircleslideri liuguri tuul

Stiilne ümmargune liugur. Üleminek piltide vahel viiakse läbi ringi ümber ringi liuguri punase ringi ümber. Suurepärane sobituge saidile, kui olete disainilahenduses kasutada ümmarguseid elemente.

23. piltide liugur jquery

Lihtne liugur "Slider Kit". Liugur on esindatud mitmesugustes kujundustes: vertikaalne ja horisontaalne. Samuti rakendatakse erinevaid kujutiste vahelist navigeerimist: hiireratta abil "ettepoole" ja "tagasi" nuppude kasutamine, kasutades hiireklõps slaidil.

24. Galerii miniatuuridega "Slider Kit"

Galerii "Slider Kit". Scroll Miniatuurse viiakse läbi nii vertikaalses kui horisontaalselt. Üleminek piltide vahel viiakse läbi kasutades: hiire rattad, hiireklõpsud või miniatuurne kursor.

25. JQuery Slider Kit Sisu liugur

Vertikaalne ja horisontaalne sisu liugurit jquery.

26. JQuery Slide Show "Slider Kit"

Slaidiseanss automaatse slaidimuutusega.

27. Lihtne professionaalne JavaScript CSS3 liugur

Puhas liugur JQuery ja CSS3 loodud 2011. aastal.

jQuery slaidiseanss miniatuuridega.

29. Lihtne jquery slaidiseanss

Slaidiseanss navigeerimisnupud.

30. Shocked Slaidiseansi jquery "skitter"

jquery plugin "skitter", et luua uimastamise slaidiseanss. Plugina toetab 22 (!) Pilte muutmisel erinevate animatsiooniefektide vaadet. See võib töötada kahe navigeerimisvõimalusega slaidide jaoks: slaidide numbrite ja pisipiltide kasutamine. Vaadake kindlasti demonstratsiooni, väga kvaliteetset leid. Kasutatud Technologies: CSS, HTML, JQuery, PHP.

31. Slaidiseanss "ebamugav"

Funktsionaalne slaidiseanss. Slaidide kujul saab teha: lihtsad pildid, Pildid allkirjadega pildid, pop-up nõuandeid, videoklipid. Võite kasutada nooli, lingid slaidi numbrite ja võtmete paremale / vasakule klaviatuuril navigeerida. Slaidiseanss on tehtud mitmes versioonis: pisipiltidega ja ilma nendeta. Kõigi valikute vaatamiseks jalutuskäigu kaugusel Demo lehel asuvad lingid Demo # 1 - Demo # 6.

Väga originaalse disaini liuguri pildid meenutavad ventilaatoriga. Animeeritud slaidi muutus. Piltide vaheline navigeerimine toimub noolede abil. See pakub ka automaatset nihet, mida saab sisse ja välja lülitada, kasutades Play / Paus nuppu, mis asub peal.

Animeeritud jquery liugur. Taustpildid on brauseri akna muutused automaatselt skaleerivad. Iga pildi jaoks hõljub ploki kirjeldusega.

34. "Flux Slider" liugur JQuery ja CSS3

Uus JQuery liugur. Slaidide muutmisel mitu lahe animeeritud toimet.

35. JQuery "Jswitch" plugin

Animeeritud jquery galerii.

Kerge slaidiseanss JQuery'l, millel on automaatne slaidimuutus.

37. Uus versioon plugina "SlideDeck 1.2.2"

Professionaalne sisu liugur. Valikud on võimalikud automaatse slaidi nihega, samuti võimaluse hiireratta abil slaidide vahelise üleminekuks.

38. JQuery Slider "sudo liugur"

Lihtne pilt laimu jquery. Väga palju rakendamise võimalusi: horisontaalne ja vertikaalne piltide muutmine, lingid slaidi numbrile ja ilma nendeta ilma piltide allkirjadega ja ilma pildimuutuse erinevate mõjudeta. Seal on funktsioon automaatse slaidi muutuse. Lingid kõigile eeskujulikule rakendamisele võib leida demo lehel.

39. Jquery CSS3 Slaidiseanss

Slaidiseanss koos miniatuuridega toetab automaatse slaidi nihe režiimi.

40. JQuery "Flux Slider"

Liugur kujutise muutuse mitme mõjuga.

41. Lihtne jquery liugur

Stiilne pildi liugur jquery.

Ma tahan öelda lihtsat viisi liuguri loomiseks ilma JS-iga kasutamisega CSS-animatsiooni abil.

1) Kõigepealt kirjutate HTML-i, oletame, et 4 pilti asendatakse liugurile.

2) Järgmisena paneme ploki suuruse ja veel mõned seaded, positsioon: suhteline on vajalik selleks, et luua vormindamise kontekst, siis on selge, miks.

Slider (laius: 500px; kõrgus: 300px; marginaal: auto; marginaal-top: 25px; piir: 1px tahke must; asend: sugulane; ülevoolu: peidetud;
3) Me määratleme ka slaidide jaoks mõned omadused:

Slaidi (laius: 500px; kõrgus: 300px; asend: absoluutne; ülemine: 0; vasak: 0;)
Nagu on näha CSS-ist, asetame kõik slaidid liuguri ülemine vasakus nurgas, täpsustades seega sama lähtepositsiooni.

1. Slaid on lähtepositsioonil, kuvatakse kasutaja poolt.

2. Slaid liigub vasakule, kuni selgub täiesti välismaal liugurit (liugur on näidatud ka eespool, ülevoolu: peidetud, vastavalt slaid ei tööta ümbritsevatele objektidele).

5. Slaid laskub ühe taset liuguriga

6. Slaid liigub lähtepositsioonile
Teisisõnu (kaadrid nüüd, vastavalt ülaltoodud loendist numbrid):

@Keyframes Slaidi (ülevalt: 0; vasakule: 0;) 1 (Transform: Translate (0px, 0px);) 2 (Transform: Translate (-500px, 0);) 3 (Transform: Translate (-500px, 300px, 300PX );
5) Niisiis, see sai selgeks, milline tee slaidi välja näeb. Iga slaidi "ringid" ümber oma konteiner on liugur - ja naaseb originaal. Seega saame lõputult keerata ühtegi slaidide arvu. Aga üks nüanss jäi, mis on selles skeemi kõige olulisem asi - aeg. Animatsiooni aja jooksul on vaja õigesti arvutada õigeaegselt ja määrata iga slaidi õige viivitus, et mitte kõikide samaaegselt animeerida. Selleks, et mõista, kuidas viivituse õigesti määrata ja animatsiooniaega arvutada, läksin ma allpool kirjeldatud.

Võtame eelmise punkti sammude nimetused ja mõistavad, mis juhtub igas etapis. Sisuliselt samme Number 1, 2 ja 6 on need sammud, milles slaid on nähtavale piirkonnas. Asjaolu, et slaidid peaksid liikuma lahutamatult ja nagu see oli, lükake üksteist liugurist, võib järeldada, et etappide 2 ja 6 kestus peaks olema võrdsed. Parandage kohe reservatsiooni, mida mul õnnestus seda disaini edukalt töötada ainult tingimusel, et esimese etapi kestus on võrdne ka 2. ja 6. kestusega. Mis juhtub 3.4 ja 5 sammude käigus on sisuliselt tehnilised vajadused ja lihtsuse puhul ühendame need kolm sammu 1.

Pärast lihtsustamist on meil:

1. Samm - liugur on allikal näidatud
2. Samm - liugur vahetuses paremale
3. Samm - liugur teeb tehnilisi liikumisi
4. Samm - liuguri nihkub vasakule, naaseb esialgse asendisse

Slaidide vahejuhtumi tagamiseks hetkel, mil slaid käivitub 2. etapp, peab järgmine slaid alustama 4. sammu.

Kui aeg, ringi kõigist animatsioon on t;
Slaidide arv;
Kestus 3 sammu - Y;
Sammude kestus on 1,2 ja 4 - x;
Animatsioon viivitusetapp N-slaidi jaoks - Z;
Siis:

Y \u003d (100 x N - 150) / N;
x \u003d (100 - y) / 3;
X ja Y tuleb tõlkida huvi ja seejärel:
Z \u003d 2 * x * t;

Juhtumi puhul, kui N \u003d 4, nagu ülaltoodud näites, saame:

3. piki - 62,5%, 1, 2 ja 4. - 12,5%. Iga järgneva slaidi jaoks animatsiooni viivitusetapp - 25%.

Millised ajavahemikud on kolmanda astme etappide vahel - see ei ole oluline.

6) Nüüd, kui me kõik loendasime ja teame kõiki väärtusi, saab lõpliku koodi anda.

Animatsioon:

@Keyframes Slide (ülevalt: 0; vasakule: 0;) 12,5% (transformation: tõlkida (0PX, 0PX);) 25% (Transform: Translate (-500px, 0);) 36% (Transform: Translate: Tõlgi (- 500px, 300px);) 37% (transformatsioon: tõlkida (500px, 300px);) 87,5% (transformation: tõlkida (500px, 0);) kuni (transformatsiooni: (0PX, 0PX);)))
Slaidid:

Slide1 (taust: URL (1.jpg); animatsioon-viivitus: 7,5s;) .sLide2 (taust: URL (2.JPG); animatsioon-viivitus: 5s;) .sLide3 (taust: URL (3.JPG); Animatsioon-viivitus: 2.5s;) .sLide4 (taust: URL (4.JPG); Animatsioon-viivitus: 0S;)
Üldised CSS kõigi slaidide jaoks:

Slaidi (laius: 500px; kõrgus: 300px; Asukoht: Absoluutne; Top: 0; vasakule: 0; Animatsiooninimi: Slid; Animatsioon-kestus: 10s; Animatsioon-ajastus-funktsioon: Lineaarne; Animatsioon-iteratsiooni arv: Lõpmatu; )
Siin, tegelikult kõik! Tänu kõigile, kes lugesid lõpuni.