JQuery biblioteek: sliders foar jo webstee

Mei de trochgong fan de tiid en de ûntjouwing fan technology op it mêd fan de web design binne feroarjen en it ferlet / easken fan brûkers nei de ynhâld sites. As earder it wie meast tekst ynhâld mei in lyts oantal tematyske bylden, hjoed is it de dominante komponint fan it grafysk. It kinne jo fluch it measte nedich en brûkbere ynformaasje, en net fergrieme tiid lêzen lange teksten. Yn ferbân mei dizze hieltyd populêr en, yn feite, in needsaaklike elemint fan in webside binne sliders. Se binne blokken mei wikseljend ynhâld yn har - fan ôfbyldings nei links. In moderne wize te foegjen in beskate foarwerp - mei help fan JQuery bibleteek. Sliders makke mei dit stik ark, in noflik, maklik te brûken, en sjocht hiel yndrukwekkend. Next sjogge wy nei hoe't om dizze eleminten fan web siden op har eigen. Mei tank oan in foldwaande grut oantal normearre helpmiddels, is it mooglik om útfiering fan it JQuery skúf-type en in ferskaat ynhâld.

Hoe te heakjen in skúf op in webside?

Manieren om te heakjen in slide-blokken oan de side nûmer. Faak net iens hawwe te skriuwen HTML-koade en ferdjipje har yn it skript. Der is in flink oantal frije biblioteken, offere brûkers in ready-made sjabloanen dat lit dy tafoeging JQuery-sliders op jo webstee. Alle jo te dwaan - is te kopiearjen it yn 'e boarne koade fan jo webside en genietsje fan de resultaten. Lykwols, yn dit gefal de mooglikheid fan 'e realisaasje fan jo skeppende ferbylding is beheind. Dêrom is it nuttich te kinnen meitsje it ûntwerp elemint selsstannich. Om dit te dwaan, moatte jo witte hoe de útfiering fan it JQuery simpel skúf, en inkeld complicate it, jo kinne altyd tafoegjen fan ekstra eleminten yn de koade.

Meitsje in skúf troch sels: yn de HTML-koade

Earst, dêr't om te begjinnen - is te registrearje de takomstige yndieling fan it skúf.

1. Festige yn HTML-triem Slideshow ienheid, dat sil befetsje al ús dia 's (bylden, ensfh).
2. It lei ul list, elke alinea fan hokker sil slaan in aparte glydbaan.

Wy wurkje mei CSS

En wy jilde foar dat de skaaimerken fan 'e gewenste styl mei help CSS-dokumint. It is needsaaklik om te lizzen ús ynhâld JQuery skúf te wurkjen goed en hie it rjocht útstrieling. Op dit toaniel, wy wurde konfrontearre mei de neikommende taken:

• soargje derfoar dat op de Slideshow ienheid jout mar ien, rjocht op it stuit de slide (of foto ynhâld), en de rest waarden ferburgen;
• arrange de dia 'iene nei de oare (lofts nei rjochts);
• do ul-bak, dy't slacht dia replik (lofts en rjochts).

Om dit te set yn de CSS-triem de folgjende parameters:

• foar it Slideshow: oerrin-x - rôlje, oerrin-Y - ferstoppe:
• foar ul: float - lofts.

Ek kinne jo ynstelle yn de parameters fan de breedte (breedte), hichte (hichte), eftergrûn (eftergrûn) ensafuorthinne.

Wy sette dizze koade in JQuery

De HTML en CSS alle nedige feroarings oanbrocht. It bliuwt it gefal foar de JQuery koade, sliders, hokker moat hawwe de folgjende parameters:

• Slides moat slagje elkoar mei in bepaalde tiid ynterfal;
• as jo de mûs de mûsoanwizer oer harren beweging moat ophâlde.

Om do dit, wy ferklearje twa fariabelen: slidewidth (gelyk oan de lingte fan 'e slide) en slidertime (bepaalt de perioade fan' e slide show). It timer sil begjinne as de side is kompleet laden site. Troch dizze parameter wy bine de aksje fan de mûs oanwizer wiist nei in slide (dy't stoppet de slide show).

Wês wis te foarskriuwe ul container lingte. It sil wêze lyk oan it oantal dia 's, fermannichfâldige mei de lingte fan elk slide.

Fier de funksje ferantwurdlik foar wikseljende dia 's. Dat is alles, kinne jo kontrolearje de prestaasjes fan dyn skúf.

konklúzje

Yn dit artikel we sjoen nei hoe't te meitsjen harren eigen JQuery-sliders te foegjen in side fan syn webside. Mei help fan it foarbyld fan in ienfâldige skúf, kinne jo komme mei harren eigen ynterpretaasje dêrfan, wêrtroch't de geskikte feroarings oan de boarne koade. Dit sil ferbetterje it ûntwerp en meitsje gebrûk fan dyn site handiger foar besikers.