Llyfrgell jQuery: sliders ar gyfer eich gwefan

Gyda threigl amser a datblygu technoleg yn y maes dylunio gwe yn newid ac anghenion / gofynion y defnyddwyr i safleoedd cynnwys. Os yn gynharach yr oedd yn bennaf cynnwys testun gyda nifer fechan o ddelweddau thematig, heddiw ei fod yn elfen amlycaf y graffig. Mae'n caniatáu i chi yn gyflym yn cael y wybodaeth fwyaf angenrheidiol a defnyddiol, ac nid ydynt yn gwastraffu amser yn darllen testunau hir. Mewn cysylltiad â hyn yn fwyfwy poblogaidd ac, mewn gwirionedd, yn elfen angenrheidiol o dudalen we yn sliders. Maent yn blociau gyda gwahanol chynnwys ynddynt - o ddelweddau i gysylltiadau. Mae ffordd fodern i ychwanegu roddir gwrthrych ar y we - gan ddefnyddio llyfrgell jQuery. Sliders greu gyda offeryn hwn, yn cael gyfforddus, yn hawdd i'w defnyddio, ac yn edrych yn drawiadol iawn. Nesaf, byddwn yn edrych ar sut i wneud elfennau hyn o'r tudalennau gwe ar eu pen eu hunain. Diolch i nifer ddigon mawr o offer safonol, mae'n bosibl i weithredu'r math llithrydd jQuery a chynnwys amrywiol.

Sut i ychwanegu slider ar dudalen we?

Ffyrdd o ychwanegu sleid-flociau i'r dudalen rhif. Yn aml, nid oes hyd yn oed wedi i ysgrifennu HTML-god a treiddio i sgript. Mae nifer sylweddol o lyfrgelloedd rhad ac am ddim, gan gynnig defnyddwyr parod templedi sy'n gadael i chi ychwanegu jQuery-sliders ar eich safle. Y cyfan sydd raid i chi ei wneud - yw i copi i mewn i'r cod ffynhonnell eich tudalen we a mwynhau y canlyniadau. Fodd bynnag, yn yr achos hwn y posibilrwydd o wireddu eich dychymyg creadigol yn gyfyngedig. Felly, mae'n ddefnyddiol i fod yn gallu creu elfen dylunio yn annibynnol. I wneud hyn, mae angen i chi wybod sut i weithredu'r jQuery llithrydd syml, a dim ond gymhlethu hyn, gallwch chi bob amser yn ychwanegu elfennau ychwanegol yn y cod.

Creu llithrydd eich pen eich hun: yn y cod HTML

Yn gyntaf, ble i ddechrau - yw cofrestru â'r cynllun y llithrydd yn y dyfodol.

1. Sefydlwyd yn uned HTML-ffeil Sioe sleidiau, a fydd yn cynnwys ein holl sleidiau (delweddau, ac ati).
2. Mae'n gosod rhestr ul, bydd pob paragraff ohonynt storio sleid ar wahân.

Rydym yn gweithio gyda CSS

Yna rydym yn gwneud cais iddo nodweddion arddull a ddymunir gan ddefnyddio CSS-ddogfen. Mae'n angenrheidiol i osod ein cynnwys jQuery llithrydd i weithio'n iawn ac roedd gan y edrych yn iawn. Ar y cam hwn, rydym yn wynebu y tasgau canlynol:

• gwneud yn siŵr bod ar yr uned Slideshow yn dangos mai dim ond un, ar y dde ar hyn o bryd y sleid (neu gynnwys llun), ac mae'r gweddill yn cael eu cuddio;
• trefnu sleidiau un ar ôl y llall (o'r chwith i'r dde);
• gwneud ul-cynhwysydd, sy'n storio sleidiau symudol (chwith a dde).

I wneud hyn, yn gosod yr opsiynau canlynol yn y CSS-file:

• gyfer y Slideshow: gorlif-x - sgrolio, gorlif-y - cudd:
• am ul: arnofio - chwith.

Hefyd, gallwch osod y paramedrau o led (lled), uchder (uchder), cefndir (cefndir) ac yn y blaen.

Rydym yn rhoi y cod hwn yn jQuery

Mae'r HTML a CSS holl newidiadau angenrheidiol wedi'u gwneud. Mae'n dal yn wir ar gyfer y cod jQuery, sliders, a ddylai gael y paramedrau canlynol:

• Dylai sleidiau yn llwyddo ei gilydd gyda cyfnod amser penodol;
• pan fyddwch yn hofran y llygoden dros dylai eu symud yn dod i ben.

Er mwyn gwneud hyn, rydym yn datgan dau newidyn: slidewidth (hafal i hyd y sleid) a'r slidertime (penderfynu ar y cyfnod y sioe sleidiau). Bydd y timer yn dechrau pan fydd y dudalen yn gwbl safle lwytho. Drwy paramedr hwn, rydym yn clymu y camau y pwyntio pwyntydd y llygoden i sleid (sy'n atal y sioe sleidiau).

Byddwch yn siwr i ragnodi hyd cynhwysydd ul. Bydd yn hafal i nifer o sleidiau, wedi'i luosi â hyd pob sleid.

Mewnosod y swyddogaeth gyfrifol am newid sleidiau. Dyna'r cyfan, gallwch edrych ar y perfformiad eich slider.

casgliad

Yn yr erthygl hon rydym yn edrych ar sut i greu eu jQuery-sliders eu hunain i fewnosod dudalen ei wefan. Gan ddefnyddio'r enghraifft o llithrydd syml, gallwch feddwl am eu dehongliad eu hunain ohoni, gan wneud y newidiadau priodol i'r cod ffynhonnell. Bydd hyn yn gwella dyluniad a gwneud defnydd o eich safle yn fwy cyfleus ar gyfer ymwelwyr.