/ / JQuery bibliotēka: slīdni jūsu vietnei

JQuery bibliotēka: slīdni jūsu vietnei

Ar laika pagājušo laiku un tehnoloģijas attīstībuWeb dizains un lietotāju mainīgajām vajadzībām / prasības satura vietnēs. Ja agrāk tas bija galvenokārt teksta saturu ar nelielu skaitu tematisku attēlu, šodien tā ir dominējošais elements grafikā. Tas ļauj ātri iegūt visvairāk nepieciešamo un noderīgu informāciju, un netērētu laiku, lasot ilgi tekstus. Saistībā ar šo arvien populārāka, un, faktiski, tīmekļa lapas nepieciešams elements ir sliders. Tie ir bloki ar atšķirīgu saturu viņiem - no attēliem uz saites. Mūsdienīga veids, kā pievienot noteiktu tīmekļa objekts - izmantojot jQuery bibliotēka. Slīdņus izveidoti, izmantojot šo rīku, saņemt ērti, viegli izmantot, un izskatās ļoti iespaidīgi. Tālāk mēs apskatīt to, kā padarīt šos elementus tīmekļa lapu par to pašu. Pateicoties pietiekami lielu skaitu standartizētu instrumentu, ir iespējams īstenot jQuery slīdni tipa un daudzveidīgu saturu.

attēla slīdni

Kā pievienot tīmekļa lapas slīdni?

Veidi, kā pievienot slīdnes uz lapuvietne pāris. Bieži vien jums pat nav jāraksta HTML kods un jāiegūst skripts. Ir ievērojams skaits bezmaksas bibliotēku, piedāvājot lietotājiem gatavu veidnes, kas ļauj jums pievienot jQuery slīdņus jūsu vietnē. Viss, kas jums ir nepieciešams, ir kopēt to mājas lapas avota kodam un baudīt rezultātu. Tomēr šajā gadījumā jūsu radošo fantāziju realizēšanas iespējas ir ierobežotas. Tādēļ jums būs lieki izveidot šo dizaina elementu. Lai to izdarītu, jums ir jāzina, kā īstenot jQuery vienkāršu slīdni, un tikai sarežģī, jūs vienmēr varat pievienot papildu elementus kodu.

Izveidojiet slīdni pats: kods HTML

Vispirms ir jāreģistrējas nākotnes slīdņa izkārtojumā.

  1. HTML failā izveidojiet slaidrādi, kurā būs visi mūsu slaidi (bildes utt.).
  2. Tajā mēs izveido sarakstu ul, katrs postenis, kurā tiks saglabāts atsevišķs slaids.

jquery sliders

Darbs CSS

Tad mēs pielietojam nepieciešamās īpašībasstils, izmantojot CSS dokumentu. Ir nepieciešams, lai mūsu izveidotais JQuery satura slider darbotos pareizi un tam ir vajadzīgais formāts. Šajā posmā mums ir šādi uzdevumi:

  • pārliecinieties, ka uz Slideshow vienībai parāda tikai vienu, tieši šobrīd slaida (vai attēlu saturu), un pārējie bija paslēptas;
  • sakārtot slaidi vienu pēc otra (no kreisās uz labo);
  • izveidojiet gala konteineru, kurā atrodas slaidi, pārvietojams (pa kreisi un pa labi).

Lai to izdarītu, CSS failā mēs iestatām šādus parametrus:

  • slaidrādi: pārplūšana-x-ritiniet, pārpildīts-y-paslēpts:
  • par ul: peldēt - pa kreisi.

slaidu bloks

Varat arī iestatīt platumu, augstumu, fonu un tā tālāk.

satura jQuery slīdni

Mēs rakstām kodu jQuery

HTML un CSS ir veiktas visas nepieciešamās izmaiņas. Joprojām jāstrādā aiz JQuery koda, slīdņus, kuriem vajadzētu būt šādiem parametriem:

  • slaidi būtu jāaizstāj ar otru ar noteiktu laika intervālu;
  • Kad jūs novietojat peles kursoru, to kustībai vajadzētu apstāties.

Šim nolūkam mēs deklarējam divus mainīgos lielumus: slidewidth (vienāds ar slaidu garumu) un slidertime (norāda slīdes maiņas periodu). Taimeris tiks palaists, kad vietnes lapa ir pilnībā ielādēta. Uz šo parametru piesaista peles kursora novirzīšanu uz slaidu (kas pārtrauc slaida maiņu).

Noteikti norādiet konteinera ul lielumu. Tas būs vienāds ar slaidu skaitu, kas reizināts ar katra slaida garumu.

Mēs ievietojam funkciju, kas atbildīga par slaidu nomaiņu. Tas viss, jūs varat pārbaudīt savu slīdni.

vienkāršs jQuery slīdnis

Secinājums

Šajā rakstā mēs paskatījāmies, kāneatkarīgi izveidot jQuery slīdņus, lai tos ievietotu jūsu vietnes lapā. Izmantojot vienkāršā slīdņa ieviešanas piemēru, varat izveidot savas interpretācijas variācijas, veicot atbilstošas ​​izmaiņas avota kodā. Tas uzlabos dizainu un padarīs jūsu vietni ērti apmeklētājiem.

Lasīt vairāk: