Html.

Ar attīstību CSS3, izkārtojumi pieaug eksponenciāli. Arvien vairāk funkcionālāku var īstenot "PURE" CSS. Šis ziņojums parāda attīstības procesu. interaktīvs Ciklisks slīdnis bez vienas līnijas JavaScript. Automātiska rotācija, jebkura slaida izvēle ar vienmērīgu pāreju - uz "tīra" CSS. Piemērs darbībā

Galvenā informācija.

Standarti un prefiksi

Īpašības pāreja, animācija un transformācija jau sen ir ieviesta vienā vai otrā, kas ieviesta visās populārajās pārlūkprogrammās. 2012. gada 6. jūnijā W3C paziņoja, ka šī CSS 3.0 daļa attīstīta standarta daļa nemainītu dramatiski un ieteica to īstenot visās pārlūkprogrammās šodien.

Front-end izstrādātājiem tas nozīmē standarta izskatu, uz kuru jūs varat paļauties uz. Tagad nav nepieciešams, lai būtu jābaidās, ka nākotnē jebkura pārlūkprogramma atteikt savu prefiksu nestandarta īpašības - jo tas tiks dublēta ar standarta īpašumu un aizstāt to, ja nepieciešams.

Novecojis interneta versija Explorer, kas drīz tiks attiecināta pat uz 9. versiju, neatbalsta pāreju, animāciju un pārveidot jebkādā veidā. Bet to īpatsvars joprojām pārsniedz 10%. IE7-9 piedāvā JS- "Plug", un netraucētu pārslēgšanās starp slaidiem nav nekas.

Kāpēc CSS, ne JS?

Ir daudzi uzdevumi, kurus var atrisināt, kad cSS palīdzība: Interaktīvās galerijas, daudzlīmeņu nolaižamās izvēlnes, trīsdimensiju diagrammu veidošana un animācija ... Kāpēc izmantot CSS, kad jūs varat darīt visu JS, īpaši ņemot vērā gatavo notikumu attīstību masu? Galvenie argumenti var būt šādi:

• Vairumā gadījumu, CSS ietekme Strādāt ātrāk, jo tiem seko to pārlūkprogrammas tikai. Tas ir īpaši labi pamanāms mobilajās ierīcēs.
• Lai īstenotu uzdevumu, jums nav nepieciešams zināšanas js un kopumā jebkuras programmēšanas valodas. Rediģēt CSS, kā likums ir pieejams arī parastajam lietotājam. Un "burvīgs malkas" CSS ir daudz sarežģītāka nekā JS.

Pārdošana

Bem

Tātad, metodoloģijas bloka elementa modifikators (BEM) tika izmantots, lai nosauktu CSS klases. Apakšējā līnija ir tā, ka izkārtojums ir balstīts uz lapas izkārtojumu no neatkarīgiem blokiem. Saskaņā ar BEM, bloks var būt elementi, bet tikai bloka iekšpusē.

Slīdņu klases:
.Slider / * bloks, kas satur attēla lente * / .slider__radio / * radio point * / .slider__Item / * slide * / .slider__Img / * attēls iekšpusē slidkalniņš * / * Saistītā slaida * / .slider__number-pēc / * iekļaušanas poga ir iebūvēta, lai atbalstītu IE7 un IE8, kas neatbalsta pseido elementus: pēc un :: pēc tam, attiecīgi * / .slider_count_x / * modifikators, kas nosaka slaidi x * /

Animācija

Animācijas secība galvenajam personālam trīs slaidiem izskatās šādi:
@Keyframes slider__item-autoplay_count_3 (0% (necaurredzamība: 0;) 10% (necaurredzamība: 1;) 33% (necaurredzamība: 1;) 43% (necaurredzamība: 0;) 100% (necaurredzamība: 0;))
Slīdņa ieviešanas iezīme ir tā, ka visi slaidi un visas pogas tiek piešķirtas tai pašai animācijai:
Slider_count_3 .slider__Intem, slider_count_3 ;)
Šī pieeja ļauj nopietni samazināt koda summu, jo visām animācijām joprojām ir jāievieš tie ar prefiksu versijām (@ -webkit-keyframes, @ -moz-keyframes un @ -o-keyframes), un katrs šāds "kaudze" Noteikumi jāapraksta atsevišķi katram slaidu skaitam, kas vajadzīgi (Klients). Ja jūs arī atsevišķi aprakstīt animāciju katrai slaidam, koda tilpums var būt desmitiem kilobaitu.

Lai izvairītos no tā, bet konsekventi aktivizē visus slaidus un pogas, izmantojot vienu animāciju, pietiek ar animācijas sākuma laikā katram pāris slaidam + pogai:
.Slider__Item: nth-of-of-type (2), .Slider__umber: nth-of-of-type (2)\u003e Animācijas aizkavēšanās: 5s; Animācijas aizkavēšanās: 5s;) .Slider__Item: nth-of-type (3), .slider__ NUMURS: NTH-of-type (3)\u003e -Webkit-animācijas kavēšanās: 10s; -o-animācijas aizkavēšanās: 10s; animācijas aizkavēšanās: 10s;) ...
Pirmajam pārim noklusējuma vērtība paliek - nulles nobīde.

Svarīgi ir arī tas, ka nobīde nav atkarīga no slaidu skaita, un to var aprakstīt vienu reizi par to maksimālo summu.

Tā rezultātā gluda animēta pāreja starp slaidiem izskatās šādi:

Pauze, braucot kursoru

Attiecībā uz gadījumiem, kad lietotājs vēlas turēt slaidu uz ekrāna, bet nevēlas izslēgt rotāciju, varat izmantot pauzes režīmu, lai pārvietotos pa slaidu:
.Slider: Hover .Slider__Item, .slider: lidināties .slider__number-pēc (-moz-animācijas-play-stāvokli: pausti; -webkit-animācijas-play-stāvokli: pausti; -Play-valsts: pauze;)

Pārslēgšanās uz klikšķi

Ir vairāki CSS "notikumi" pārslēdzami hTML elements. Ja mēs runājam par peles klikšķi, tad tas ir pseido-klases izskats: fokuss ,: mērķis vai: pārbaudīts vienā no lapas elementiem. Pseido-klase: Fokuss var būt ne vairāk kā viens elements vienā lapā vienlaicīgi; Pseido-klase: Mērķtiecas uz pārlūkprogrammas vēsturi un prasa klātbūtni tagu "A"; Pseido-klase: pārbaudīts atceras stāvokli pirms iziešanas no lapas, kā arī, ja radio baseini, ir diskrēts slēdzis, ja var izvēlēties tikai vienu elementu konkrētas grupas - kas ir nepieciešams.
.Slider__radio (stili nav izvēlēti radio doki) .slider__radio: pārbaudīts (izvēlēto radiokopteru stili)

Selektoros zem 4. līmeņa pārslēdziet patvaļīgā elementa stāvokli (piemēram, slīdēšanas necaurredzamība) ir iespējama tikai komplektā ar radio pogu, izmantojot kaimiņiem + un ~. Jūs varat pārslēgt gan kaimiņu stilus, gan kaimiņu pēcteču stilus, bet jebkurā gadījumā kaimiņam jābūt pēc radiokopteriem.
/ * Pirmā slaida stils "nav izvēlēts" * / .slider__radio: nth-of-type (1) ~ Pirmais slaids valsts izvēlētajā "* / .slider__radio: nth-of-type (1): pārbaudīts ~
Tiek izmantota dūmainības slīdēšanas pārslēgšana, kurā ir attēls. Tas ir vairāk universāls veidsnekā attēla pārslēgšanas īpašības, jo DIV konteinerā, atšķirībā no tukša img elementa, var novietot jebkuru papildus informācija (Piemēram, slaida nosaukums vai saistītais apraksts, ieskaitot saites).
Par slaidiem, pārejas īpašības ir norādītas, kas ļauj pārslēgties starp tiem gludu.
.Slider__Item (-moz-pāreja: necaurredzamība 0.2s Linear; -Webkit pāreja: necaurredzamība 0.2s Linear; -O-Pāreja: necaurredzamība 0.2s Linear; Pāreja: necaurredzamība 0.2s Linear;)

Rotācijas pārtraukšana, izvēloties slaidu

Izvēloties lietotāju jebkuru slaidu, jums ir jāpārtrauc animācija visu slaidiem un pogām. Tas ir saistīts ar to, ka darbības animācijas īpašību vērtības vienmēr ir virs visām citām tādām pašām īpašībām (jūs varat pārtraukt pat inline rekvizītus ar Svarīgi).

Kopš animācijas, pat ja struktūra ir vienāda, ir katrs slaids, un ir nepieciešams izslēgt visu slaidu animāciju (citādi gluda pāreja Tiks piedalīties trīs slaidi), visi radio kanāli jānovieto pirms pirmā slaida.
...

Turklāt visas pogas (radio pogas etiķetes) ir jāapvieno atsevišķā vienībā un jānovieto pēc radio baseiniem, pretējā gadījumā var rasties problēmas ar universālu etiķešu novietojumu patvaļīgajam slaidu skaitam.

Pietura animācija visu slaidu un pogām, izvēloties jebkuru slaidu ir noteikts šādi:
.Slider__radio: pārbaudīts ~ .slider__Item, .slider__radio: pārbaudīts ~ nav;)

Patvaļīgi skaitļu slaidi

Padarīt universālu slīdni jebkurā slaidu skaitā nav iespējams, jo katram skaitlim tas aizņem savu "kaudze" CSS noteikumus animācijas. Katrs šāds "kaudze" (ja aprakstīts), var savienot ar slīdņa bloka modifikatoru:
.Slider_count_x.
kur x ir slaidu skaits.

Lai atbalstītu dažas vecās pārlūkprogrammas, pirmais slaids nav animēts. Šī iemesla dēļ pirmās attēla tvertnei ir necaurredzamība vienmēr ir vienāda ar 1,0. Ir problēma: ar vienmērīgu divu citu slaidu komutāciju, pirmais tiek pārvietots (tas var būt vecāks par vecākiem no slīdņa bloka). Lai noņemtu pārraides efektu, pārejas aiztures aizkavēšanās ir iestatīta visiem slaidiem, izņemot izvēlēto; Izvēlētajam, Z index ir uzstādīts vairāk nekā jebkurš cits:
.Slider__Item (necaurredzamība: 1.0; Pozīcija: Relatīvais; -Moz-Pāreja: necaurredzamība 0.0s Linear 0.2s; -webkit-Pāreja: Opacity 0.0s Linear 0.2s; -O-Pāreja: Opacity 0.0s Linear 0.2s; Pāreja: Pāreja 0,0s Linear 0.2s;) .slider__radio: nth-of-type (1): pārbaudīts ~ .slider__Item: nth-of-type (1), .slider__radio: nth-of-type (2): pārbaudīts ~ ..slider__Item: NTH-of-of-type (2), .slider__radio: nth-of-of-type (3): pārbaudīts ~ .Slider__Item: nth-of-type (3), .slider__radio: nth-of-type (4): pārbaudīts ~. Slider__Item: nth-of-type (4), .slider__radio: Nth-of-of-type (5): pārbaudīts ~ : Necaurredzamība 0.2S lineārā;
Tā, ka slaidi nav pretrunā citiem vietnes elementiem (piemēram, nav pārklāta nolaižamās izvēlnes ar Z index, kas ir mazāks par vai vienāds ar 6), izveidojiet savu kontekstu (kraušanas kontekstu) savienojuma blokam ir minimāli nepieciešams redzamībai, Z-index`a:
.Slider (Z index: 0;)

tā

Jau šodien, bez programmēšanas prasmēm un specializētām bibliotēkām, tās galīgajai standartizācijai, CSS 3.0 ļauj īstenot sarežģītus un interesantus uzdevumus. Aprakstītais interaktīvais slīdnis pašlaik ir pilnībā darbojies 80% no RUNST lietotājiem. Lielākajai daļai pārējo lietotāju, proti, IE7-9 pārlūkprogrammu lietotājiem, varat izmantot JS- "Plug", kas īsteno slīdņa galveno funkcionalitāti.

Var redzēt darba piemēru

2015. gada 3. marts plkst. 18:15

Interesanti un tajā pašā laikā ir vienkāršs slīdnis tīri CSS.3

• Mājas lapas izstrāde,
• CSS,
• Html.

Es ne atvērt Ameriku ikvienam, es nebūs pārsteigums sabiedrībai ar jaunu fokusu un neaizvieto smadzenes tiem, kas peld ar CSS3 kā akvaitantu. Es jums pateiks vienkāršu veidu, kā izveidot slīdni, izmantojot vienkāršus CSS3 funkcijas bez nepieciešamības izmantot JavaScript.

1. Fonda kustība

Lai īstenotu slīdni, mums būs vajadzīgs diezgan vienkāršs tagu komplekts, kas savukārt atbildēs uz slīdņa elementiem.

Šeit mēs redzam, ka kopējais "iesaiņojuma" bloks satur "slīdni" bloku ar 5 slaidiem, kas var novietot jebkuru HTML kodu, kas atradīsies uz slaida. Pirms kopējās vienības ir radio pogas, kas pēc tam tiks paslēptas, lai izveidotu savu slaidi navigācijas paneli, ar kuru kontroles bloku etiķetes palīdzēs mums.

2. Izveidojiet slīdni

Šeit mēs apstāsies un apsvērsim maz css. Lūdzu, ņemiet vērā, ka dažām īpašībām pārrobežu pārlūkprogrammas prefiksi tiek piestiprināti visiem mūsdienu pārlūkprogrammas Varētu tos saprast.

* (Margin: 0; polsterējums: 0; -webkit-box-izmēra: pierobežas kaste; -Moz-box-izmēra: pierobežas kaste; -O-box-izmēru: Border-Box; Box-Izmērs: Border-Box; ) Virsbūve (fona attēls: URL (http://habrastorage.org/files/996/d76/d04/996D76D0410D422FA54CC422FA54CC433CE7EAD2A.png);)
Ar dizainu fona un kopīgie stili viss ir skaidrs.

Wrapper (Augstums: 350px; Margin: 100px auto 0; Pozīcija: Relatīvais; Platums: 700px;) .slider (fona krāsa: #ddd; Augstums: mantojums; pārplūde: slēpta; -shadow: 0 0 20px RGBA (0, 0, 0, .5); -Moz-Box-Shadow: 0 0 20px RGBA (0, 0, 0, .5); -O-Box-Shadow: 0 0 20px RGBA (0, 0, 0, .5); Box-Shadow: 0 0 20px RGBA (0, 0, 0, .5);)
Kopējai vienībai un blokam ar slīdni ir tādas pašas dimensijas, lai lieliski uzraudzītu slīdņa pozīciju lapā. Lai gan nav slaidu, slīdni mēs īslaicīgi krāsoti gaiši pelēkā krāsā.

Wrapper\u003e ievade (displejs: nav;)
Radio pogas slēpt. Mums tas būs vajadzīgs vēlāk.

Rezultāts Šis brīdis piemēram:

3. Veicot slaidus

Šeit mēs izvirzām kopīgus stilus slaidiem un katram slaidam atsevišķi:

Slaidi: Absolute; Platums: mantojums;) .slide1 (fona attēls: URL (http://habrastorage.org/files/3f2/628/BD5/3F2628BD58C8452DB516195CB0C9BFC9.jpg);) : //habrastorage.org/files/3e1/95d/c7f/3e195dc7f5a64469807f49a14f9807f49a14f97ba0e.jpg);) .slide3 (Fona attēla: URL (http://habrastorage.org/files/663/6b1/ d4f /.jpg) ;) Files / 53C / FF6 / C1C / 53CFF6C1CAF842368C70B8EF892D8402.JPG););
Visiem slaidiem mēs norādījām absolūto pozicionēšanu, lai jūs varētu spēlēt ar izskatu sekām. Slaidu izmēri tiek ņemti no paša slīdņa lieluma, lai tos nevajadzētu parakstīt vairākās vietās.

4. Mēs izgatavojam navigāciju uz slaidiem

Tā kā radio pogas ir paslēptas, un mums ir nepieciešamas kā slēdži, mēs sastādām sagatavotās etiķetes:

Wrapper .controls (pa kreisi: 50%; atstarpe: -98px; pozīcija: absolūts;) .Wrapper etiķete (kursors: rādītājs; displejs: inline bloks; augstums: 8px; rezerve: 25px 12px 0 16px; stāvoklis: relatīvais; Platums: 8px; -webkit-robežu rādiuss: 50%; -Moz-Reklāma: 50%; -O-RENCER-RADIUS: 50%; robežu rādiuss: 50%;). Border etiķete: pēc (robeža: 2px cietā #ddd; saturs: "" displejs: bloks; augstums: 12px; pa kreisi: -4px; pozīcija: absolūts; augšpuse: -4px; platums: 12px; -webkit-robežu rādiuss: 50%; -Moz robeža - Rādiuss: 50%; -o robežu rādiuss: 50%; Robežu rādiuss: 50%;)
Mēs izgatavojam navigācijas klasiku. Katra poga ir apgabals apļa veidā, kurā, ar aktīvo slaidu, tukša platība ir daļēji krāsota. Tikmēr mums ir šāds rezultāts:

5. Mēs uzzinām pogu, lai noklikšķinātu

Ir pienācis laiks mācīt slīdni, lai pārslēgtos slaidus, noklikšķinot uz konkrētas pogas:

WRAAPPER etiķete (kursors: rādītājs; Displejs: inline bloks; Augstums: 8px; Margin: 25px 12px 0 16px; Pozīcija: Relatīvais; Platums: 8px; -Webkit-Reklāma: 50%; -Moz-Riteņus: 50% %; -O robežu-rādiuss: 50%; robežu rādiuss: 50%; -webkit-pāreja: fona vieglums-in-out .5s; -Moz-pāreja: fona vieglums-in-out .5s; -o- Pāreja: fona vieglums-in-out .5s; pāreja: fona vieglums-in-out 0,5s;) .Wrapper etiķete: lidināties, # slide1: pārbaudīts ~ .controls etiķete: nth-of-type (1), # slide2: Pārbaudīts ~ .controls etiķete: nth-of-type (2), # slide3: pārbaudīts ~ .controls etiķete: nth-of-type (3), # slide4: pārbaudīts ~ .controls etiķete: nth-of-type (4) # Slide5: pārbaudīts ~ .controls etiķete: nth-of-type (5) (fons: #ddd;)
Navigācijas pogās pievienojiet gludu krāsošanu. Pievienojiet arī nosacījumus, kādos aktīvā poga un poga, kurā kursors būs nemanāmi iekrāsots. Mūsu pašu radio pogas ir gatavas:

6. Inženierzinātņu slīdnis

Nu, tagad mēs to darām, lai slaidi beidzot pārslēgti:

Slaidi (augstums: mantot; dūmainība: 0; amats: absolūts; platums: mantojums; z-index: 0; -webkit-transformācija: skala (1.5); -Moz-transformācija: skala (1,5); -O-transformācija: mērogs (1.5); pārveidot: mērogu (1,5); -webkit-pāreja: pārveidot vieglumu-in-out .5s, necaurredzamība vieglumu-in-out .5s; -Moz-pāreja: pārveidot vieglumu-in-out .5s, necaurredzamība vieglumu -In-out 0,5s; -O-pāreja: pārveidot vieglumu-in-out .5s, necaurredzamība vieglumu-in-out .5s; pāreja: pārveidot vieglumu-in-out .5s, necaurredzamību vieglumu-in-out .5s; ) # Slide1: pārbaudīts ~ .slider\u003e .slide1, # slide2: pārbaudīts ~ .slider\u003e .slide2, # slide3: pārbaudīts ~ .slider\u003e .slide3, # slide4: pārbaudīts ~ .slider\u003e .Slider\u003e .slide5 (necaurredzamība: 1; z-index: 1; -webkit-transformācija: skala (1); -Moz-transformācija: skala (1); -O-transformācija: mērogs (1); pārveidot: mērogu (1); Transformācija: skala (viens);)
Mēs pievienojam īpašības kopējās slaidu stilos, kuros visi slaidi kļūst neredzami un dodas uz fonu. Mēs arī pievienojām nelielu slaidu pieaugumu, kamēr tie ir neredzami, lai sniegtu interesantu izskatu slīdni.

Rezultātu var apskatīt šeit.

CSS slīdņiem ir dažas priekšrocības pār slīdņiem uz JavaScript. Viena no šīm priekšrocībām ir lejupielādes ātrums. Tiek izmantoti ne tikai attēli slīdņiem. lieli izmēri (Ja nav optimizācijas dažādiem ekrāniem), tas ir arī tērēts uz skriptu lejupielādi kādu laiku. Bet rakstā jūs redzēsiet tikai slīdņus tīros CSS.

Tas ir tas, ko es atradu vietnē par tēmu slīdņiem:

1. CSS3 slīdni attēli

Slider uz CSS, kas izmanto radio pogas slaidus, lai pārvietotos. Šie radio baseini ir slīdņus. Turklāt papildus radio baseiniem navigācija tiek veikta, izmantojot šāvēju pa kreisi un pa labi. Lai sekotu tam, kāds attēls ir redzams - tiek izmantotas pseido-skolas: pārbaudīts.

2. CSS3 slīdni attēli ar miniatūrām

Atšķirībā no pagātnes slīdni CSS, šeit, nevis radio baseini apakšā ir visu attēlu sīktēli, kas ir ērti, veidojot attēlu galeriju. Attēli tiek aizstāti ar sava veida efektu: vienmērīgi pazūd.

3. Galerija CSS

Bet šis slīdnis CSS ir ideāli piemērots lapu pārdošanai. Parasti daudzi tīmekļa izstrādātāji aizdevumu izstrādē (pārdošanas lapas) novieto slīdni pašā sākumā tā, ka pirmajā ekrānā (bez ritināšanas), apmeklētājs nekavējoties redzēja visas priekšrocības, ko tā atrodas šajā lapā. Turklāt šis slīdnis ir adaptīvs, kas arī patīk.

4. CSS slīdni bez saitēm

Tūlīt es vēlos pamanīt, ka šis slīdnis neizmanto saites! Pēc noklusējuma, papildus galvenajam attēlam (slide), 2 vairāk slaidi ir redzami. Tie atrodas aiz galvenā. Slaidu maiņa notiek skaistā režīmā: vispirms abi slaidi tiek pārvietoti, un slaids kļūst par centru, kas pēc tam kļūs par galveno. Tad slaidu palielinās un novieto priekšā pārējiem.

5. Adaptīvais slīdnis uz CSS3

Vēl viens adaptīvs slīdnis, kura vadība ir balstīta uz radiokopteriem. Lai redzētu, kā šis slīdnis izskatīsies dažādas ierīcesah - jūs varat patstāvīgi mainīt pārlūkprogrammas logu vai slīdņa lapā ir īpašas ikonas dažādām ierīcēm, noklikšķinot uz kura jūs redzēsiet, ka jūs redzēsiet slīdni datorā, planšetdatorā vai viedtālrunī.

*** bonusa slīdnis ***

Papildus visiem slīdņiem, kas ir iepriekš izklāstīti, es vēlos iepriecināt jūs ar citu. Šis slīdnis ir ideāls attēlu galerijas izveidei. Vārdi nepaskaidro, ko viņš dara, tāpēc labāk ir skatīties visu uz video:

1. Lieliskas jquery slaidrādi

Liela iespaidīga slīdrāde, izmantojot jQuery tehnoloģijas.

2. JQuery "mēroga karuselis" spraudnis

Mērogojama slaidrāde, izmantojot jQuery. Jūs varat iestatīt izmērus slīdrādes, kas jums ir vispiemērotākā.

3. JQuery Plug "Slidejs"

Attēlu slīdni ar teksta aprakstu.

4. Plugin "JSlidernews"

5. CSS3 jQuery slīdni

Kad jūs virzīt kursoru uz navigācijas bultiņām, parādās nākamās slaida apaļais sīktēls.

6. Jauki jQuery slīdni "Prezentācijas cikls"

jQuery slīdni Ar attēla ielādes indikatoru. Ir automātiska slaidu izmaiņas.

7. JQuery spraudnis "Parallax slider"

Slīdnis ar tilpuma fona efektu. Šī slīdņa izcelt fona fonā, kas sastāv no vairākiem slāņiem, no kuriem katrs ir ritināts ar dažādi ātrumi. Tā rezultātā tas izrādās imitācija no surround efektu. Tas izskatās ļoti skaists, jūs varat pārliecināties par to. Šādās pārlūkprogrammās tiek parādīts vienmērīgāks efekts: Opera, Google Chrome., IE.

8. Svaigi, gaiši jQuery slīdni "BXSLIDER 3.0"

Demo lapā sadaļā "Piemēri" jūs varat atrast saites uz visiem iespējamās iespējas Izmantojiet šo spraudni.

9. JQuery Slider attēlu, spraudnis "Slidejs"

Stilīgs jquery slīdnis noteikti varēs rotā jūsu projektu.

10. JQuery spraudnis slaidrādi "Easy slaidi" v1.1

Viegli lietojams jQuery spraudnis, lai izveidotu slaidrādi.

11. spraudnis "jQuery slidini"

Viegli jQuery spraudnis dažādos dizainos. Ir automātiska slaidu izmaiņas.

12. JQuery CSS galerija ar automātisku slaidu maiņu

Ja apmeklētājs noteiktā laikā nav nospiest "uz priekšu" vai "atpakaļ" bultiņas, galerija sāks ritināt automātiski.

13. JQuery Slider "NIVO slīdni"

Ļoti profesionāla augstas kvalitātes gaismas spraudnis ar derīgs kods. Izmaiņas ir daudz dažādu slaidu efektu.

14. JQuery Slider "Mobilylider"

Svaigs slīdnis. jQuery slīdni ar dažādām attēlu izmaiņām.

15. JQuery spraudnis "Slider²"

Vienkāršs slīdnis ar automātisko slaidu maiņu.

16. Svaigs JavaScript slider

Slīdnis ar automātisku attēlu maiņu.

Spraudnis slaidrādes ieviešanai ar automātisku slaidu maiņu. Ir iespējams pārvaldīt displeju, izmantojot attēlu sīktēlus.

jQuery css. Attēla slīdni, izmantojot Nivoslider spraudni.

19. JQuery Slider "JSHOWFF"

Spraudnis, lai pagrieztu saturu. Trīs iespējas lietošanai: bez navigācijas (ar automātisku maiņu slaidrādes formātā), ar navigāciju formā pogām, ar navigāciju formā attēliem.

20. Aizvara efekts Portfolio spraudnis

Svaigi jquery spraudnis fotogrāfu portfolio. Galerija īstenoja interesantu ietekmi mainīt attēlus. Fotogrāfijas aizstāj viens otru ar līdzīgu objektīva aizvara darbu.

21. Easy JavaScript CSS slīdni "Tinyslider 2"

Attēlu slīdņa ieviešana ar izmantojot JavaScript un CSS.

22. Tinycircleslider slīdņa vējš

Stilīgs apaļš slīdnis. Pāreja starp attēliem tiek veikta, velkot ap apļa slīdni kā sarkanu apli. Lieliski iederas jūsu vietnē, ja esat dizains, izmantojiet apaļos elementus.

23. attēlu slīdnis jQuery

Easy slīdni "Slider Kit". Slīdnis ir pārstāvēts dažādos dizainos: vertikāli un horizontāli. Arī ieviesa dažāda veida navigācijas starp attēliem: izmantojot "uz priekšu" un "atpakaļ" pogas, izmantojot peles riteni, izmantojot peles klikšķi uz slaida.

24. Galerija ar miniatūrām "Slider Kit"

Galerija "Slider Kit". Ritināšanas miniatūra tiek veikta gan vertikālā, gan horizontālā virzienā. Pāreja starp attēliem tiek veikta, izmantojot: peles riteņus, peles klikšķus vai miniatūras kursoru.

25. JQuery Slider Kit Content Slider

Vertikālais un horizontālais saturs slīdnis uz jQuery.

26. JQuery Slide Show "Slider Kit"

Slaidrāde ar automātisko slaidu maiņu.

27. Easy Professional JavaScript CSS3 slīdni

Veikls slīdnis Jquery un CSS3, kas izveidots 2011. gadā.

jQuery slīdrāde ar miniatūrām.

29. Vienkārša jQuery slaidrāde

Slaidrādi ar navigācijas pogām.

30. Šokēts slīdrādes jQuery "skitter"

jQuery spraudnis "skitter", lai izveidotu apdullināšanu slīdrādi. Plugin atbalsta 22 (!) Apskatīt dažādas animācijas efektus, mainot attēlus. Tas var strādāt ar divām navigācijas iespējām slaidiem: izmantojot slaidu skaitļus un ar sīktēlu. Noteikti apskatiet demonstrāciju, ļoti augstas kvalitātes atrastu. Lietotas tehnoloģijas: CSS, HTML, jQuery, PHP.

31. Slideshow "neērts"

Funkcionālā slaidrāde. Slaidu veidā var veikt: vienkārši attēli, Attēli ar parakstiem, attēliem ar pop-up padomiem, videoklipiem. Varat izmantot bultiņas, saites uz slīdēšanas numuriem un taustiņiem pa labi / pa kreisi uz tastatūras, lai pārvietotos. Slaidrāde tiek veikta vairākās versijās: ar sīktēliem un bez tiem. Lai apskatītu visas iespējas, staigājiet pa saitēm Demo # 1 - Demo # 6, kas atrodas uz augšu uz Demo lapā.

Ļoti oriģināli dizaina slīdni attēli, kas atgādina ventilatoru. Animācijas slaidu izmaiņas. Navigācija starp attēliem tiek veikta, izmantojot bultiņas. Tā nodrošina arī automātisku nobīdi, ko var ieslēgt un izslēgt, izmantojot pogu Play / Pause, kas atrodas uz augšu.

Animācijas jquery slīdni. Fona attēli tiek automātiski mērogošanas, kad mainās pārlūkprogrammas logs. Katram attēlam ir pieejams bloks ar aprakstu.

34. "Flux slīdni" slīdni uz jQuery un CSS3

Jauns jQuery slīdnis. Mainot slaidus, vairākas atdzist animācijas efektus.

35. JQuery "JSWitch" spraudnis

Animācijas jQuery galerija.

Gaismas slaidrādi par jQuery ar automātisko slaidu pārmaiņām.

37. Jaunā versija spraudņa "SLIDECK 1.2.2"

Profesionālā satura slīdnis. Iespējas ir iespējamas ar automātisku slaidu maiņu, kā arī iespēju, izmantojot peles riteni pārejai starp slaidiem.

38. JQuery Slider "Sudo Slider"

Easy Image Slider par jQuery. Ļoti daudzas ieviešanas iespējas: horizontālā un vertikālā attēlu maiņa, ar saitēm uz slaidu numuru un bez tiem, ar attēlu parakstiem un bez dažādām attēlu izmaiņām. Ir automātiskas slaidu izmaiņas. Saites uz visu paraugu īstenošanu var atrast Demo lapā.

39. Jquery CSS3 slaidrādi

Slaidrāde ar miniatūrām atbalsta automātiskās slaidu maiņas režīmu.

40. JQuery "Flux Slider"

Slīdni ar vairākām attēlu izmaiņām.

41. Vienkāršs jquery slīdnis

Stilīgs attēlu slīdnis uz jquery.

Es vēlos pateikt vienkāršu veidu, kā izveidot slīdni, neizmantojot JS, izmantojot CSS animāciju.

1) Lai sāktu ar, jūs rakstīsiet HTML, pieņemsim, ka 4 attēli tiks aizstāti slīdni.

2) Tālāk mēs ievietojam bloka lielumu un vēl dažus iestatījumus, pozīciju: radinieks ir nepieciešams, lai izveidotu formatēšanas kontekstu, tad būs skaidrs, kāpēc.

Slīdnis (platums: 500px; Augstums: 300px; Margin: Auto; Margin-top: 25px; Robeža: 1px cietā melnā krāsā; Pozīcija: Relatīvais; Pārplūde: slēpta;)
3) Mēs arī definējam dažas īpašības slaidiem pašiem:

Slide (platums: 500px; Augstums: 300px; Absolute; Tops: 0; pa kreisi: 0;)
Kā redzams no CSS, mēs novietojam visus slaidus augšējā kreisajā stūrī slīdni, tādējādi norādot to pašu avota pozīciju.

1. Slide atrodas avota stāvoklī, lietotājs to pierāda.

2. Slide pārvietojas pa kreisi, līdz izrādās pilnīgi ārzemju slīdni (slīdnis ir norādīts arī iepriekš, pārplūdes: paslēpts, attiecīgi, slaids nedarbojas uz apkārtējiem objektiem).

5. Slide nolaižas vienā līmenī ar slīdni

6. Slide pārvietojas uz sākuma stāvokli
Citiem vārdiem sakot (šāvienu tagad, saskaņā ar skaitļiem no saraksta iepriekš):

@Keyframes slaids (no (augšpusē: 0; pa kreisi: 0;) 1 (Transformācija: Tulkot (0px, 0px);) 2 (pārveidot: Tulkot (-500PX, 0);) 3 (Transformācija: Tulkot (-500PX, 300px );) 4 (pārveidot: Tulkot (500px, 300px);) 5 (pārveidot: Tulkot (500px, 0);) līdz (pārveidot: (0px, 0px);))
5) Tātad, kļuva skaidrs, kā izskatās slaida ceļš. Katrs slaids "apļi" ap tā konteineru ir slīdnis - un atgriežas oriģinālajā. Tādējādi mēs varam bezgalīgi pagrieziet jebkuru slaidu skaitu. Bet viens nianss saglabājās, kas ir vissvarīgākā lieta šajā shēmā - laiks. Ir nepieciešams pareizi aprēķināt animācijas stāstīšanu laikā un noteikt pareizu kavēšanos katram slaidu, lai ne visiem vienlaicīgi būtu animācijas. Lai saprastu, kā pareizi iestatīt aizkavi un aprēķināt animācijas laiku, es devos tālāk.

Apskatīsim soļu apzīmējumus no iepriekšējā punkta un sapratīs, kas notiek katrā solī. Būtībā, 1., 2. un 6. posma ir soļi, kurās slaids nonāk redzamā vietā. No fakta, ka slaidiem vajadzētu pārvietoties nesaraujami un, kā tas bija, virziet viens otru no slīdņa, var secināt, ka ilgums 2. un 6. posma jābūt vienādam. Nekavējoties veikt atrunu, ka man izdevās veiksmīgi strādāt šo dizainu tikai ar nosacījumu, ka ilgums pirmā posma ir vienāds ar ilgumu 2. un 6. vietā. Kas notiek 3.4. Un 5. soļu laikā, būtībā ir tehniskas vajadzības un vienkāršības, pieņemsim apvienot šos trīs soļus 1.

Pēc vienkāršošanas mums ir:

1. solis - slīdnis tiek demonstrēts avotā
2. solis - slīdnis pāriet uz labo pusi
3. Step - slīdni padara tehniskās kustības
4. solis - slīdni pāriet pa kreisi, atgriežoties sākotnējā stāvoklī

Lai nodrošinātu incidentu uz slaidiem, brīdī, kad slaids sākas 2. solis, nākamais slaids ir jāsāk 4. solis.

Ja laiks, visas animācijas aplis ir t;
Slaidu skaits - N;
Ilgums 3 soļi - y;
Pasākumu ilgums ir 1,2 un 4 - x;
Animācijas aizkaves solis N-slide - Z;
Tad:

Y \u003d (100 * N - 150) / N;
x \u003d (100 - y) / 3;
x un y ir jāpārvērš interesēs, un pēc tam:
z \u003d 2 * x * t;

Attiecībā uz gadījumiem, kad n \u003d 4, kā iepriekš minētajā piemērā, mēs saņemam:

3. laukums - 62,5%, 1, 2 un 4 - 12,5%. Animācijas aizkaves solis katram nākamajam slaidam - 25%.

Kādi intervāli būs starp posmiem trešajā posmā - tas nav svarīgi.

6) Tagad, kad mēs visi skaitām un uzzinām visas vērtības var piešķirt gala kodu.

Animācija:

@Keyframes slaids (no (augšpusē: 0; pa kreisi: 0;) 12,5% (pārveidot: Tulkot (0px, 0px);) 25% (pārveidot: Tulkot (-500PX, 0);) 36% (pārveidot: Tulkot (- 500px, 300px);) 37% (pārveidot: tulkot (500px, 300px);) 87,5% (pārveidot: tulkot (500px, 0);) līdz (pārveidot: (0px, 0px);));)
Slaidi:

Slide1 (fons: URL (1.jpg); animācijas aizkavēšanās: 7,5s;) .slide2 (fons: URL (2.jpg); animācijas aizkavēšanās: 5s;) .slide3 (fons: URL (3.jpg); Animācijas aizkavēšanās: 2.5s;) .slide4 (fons: URL (4.jpg); animācijas aizkavēšanās: 0S;)
Vispārīgi CSS visiem slaidiem:

Slide (platums: 500px; Augstums: 300px; Absolute; Tops: 0; Pa kreisi: 0; Animācijas nosaukums: slīdošs; Animācijas ilgums: 10s; Animācijas laika funkcija: Linear; Animācijas-iterācijas skaits: bezgalīgs; )
Šeit, patiesībā, viss! Paldies visiem, kas lasa līdz galam.