JQuery librarya: sliders alang sa imong website

Uban sa paglabay sa panahon ug sa pagpalambo sa teknolohiya sa kapatagan sa web design-usab ug sa mga panginahanglan / kinahanglanon sa mga tiggamit sa mga dapit sulod. Kon sayo pa kini mao ang kasagaran nga teksto sulod sa usa ka gamay nga gidaghanon sa mga thematic mga larawan, karon kini mao ang dominante nga bahin sa graphic. kini nagtugot kaninyo sa madali sa pagkuha sa labing gikinahanglan ug mapuslanon nga impormasyon, ug dili usik sa panahon sa pagbasa taas nga mga teksto. Sa koneksyon uban sa niini nga mas popular ug, sa pagkatinuod, usa ka gikinahanglan nga elemento sa usa ka pahina sa web mga sliders. Sila mao ang mga bloke uban sa lainlaig sulod diha kanila - gikan sa mga larawan sa mga sumpay. Usa ka modernong paagi sa pagdugang sa usa ka gihatag nga web butang - sa paggamit sa JQuery librarya. Sliders gibuhat sa uban sa niini nga himan, sa pagkuha sa usa ka komportable, sayon nga gamiton, ug motan-aw kaayo impresibo. Sunod kita motan-aw kon sa unsang paagi sa paghimo niini nga mga elemento sa mga panid sa web sa ilang kaugalingon. Salamat sa sa usa ka igo nga dako nga gidaghanon sa estandard mga himan, kini mao ang posible nga sa pag-implementar sa JQuery slider-type ug nagkalainlaing mga sulod.

Sa unsa nga paagi aron sa pagdugang sa usa ka slider sa usa ka panid sa web?

Paagi sa pagdugang sa usa ka slide-bloke sa panid gidaghanon. Kasagaran dili gani sa pagsulat sa HTML-code ug pagsusi sa script. Adunay usa ka igo nga gidaghanon sa mga libre nga mga librarya, sa paghalad tiggamit usa ka andam nga-naghimo sa templates nga ikaw makadugang JQuery-sliders sa ibabaw sa imong site. Ang tanan nga imong buhaton - mao ang pagkopya niini ngadto sa source code sa imong web page ug makatagamtam sa mga resulta. Apan, sa niini nga kaso sa posibilidad sa sa katumanan sa imong mga paglalang sa imahinasyon ang limitado. Busa, kini mao ang mapuslanon nga makahimo sa paghimo sa disenyo elemento kagawasan, gawas. Sa pagbuhat niini, kamo kinahanglan nga masayud sa unsa nga paagi sa pag-implementar sa JQuery yano nga slider, ug lamang complicate kini, nga kamo mahimo sa kanunay sa pagdugang og dugang nga mga elemento sa code.

Paghimo sa usa ka slider pinaagi sa imong kaugalingon: sa HTML code

Una, diin sa pagsugod - mao nga magparehistro sa umaabot nga layout sa slider.

1. Natukod sa HTML-file
   yunit, nga naglangkob sa tanan sa atong mga slide (mga larawan, ug uban pa).
2. Kini nahimutang ul listahan, ang matag parapo sa nga tipigan sa usa ka linain nga slide.

Kita nagtrabaho uban sa CSS

Unya sa paggamit kita niini sa mga kinaiya sa mga gitinguha nga estilo sa paggamit sa CSS-dokumento. Kini mao ang gikinahanglan nga magpahamtang sa atong sulod JQuery slider sa pagtrabaho sa husto ug adunay katungod sa pagtan-aw. Sa niini nga yugto, kita nag-atubang uban sa mosunod nga mga buluhaton:

• sa pagsiguro nga sa yunit
  magpasundayag sa usa lamang, sa tuo sa higayon nga ang mga slide (o hulagway sulod), ug ang uban gitagoan;
• arrange sa mga slide sa usa ka human sa uban nga mga (wala ngadto sa tuo);
• sa pagbuhat sa ul-sudlanan, nga tindahan slide movable (wala ug tuo).

Sa pagbuhat niini, ang mga mosunod nga mga opsyon diha sa CSS-file:

• alang sa
  : nagaawas-x - linukot, nagaawas-y - gitagoan:
• alang sa ul: float - wala.

Usab mo ang lantugi sa gilapdon (gilapdon), gitas-on (gitas-on), background (background) ug uban pa.

gibutang kami niini nga code sa JQuery

Ang HTML ug CSS sa tanan nga mga gikinahanglan nga mga kausaban ang gihimo. Kini nagpabilin sa kaso alang sa JQuery code, sliders, nga ang mga mosunod nga mga pag-lantugi:

• Slide kinahanglan molampos sa usag usa uban sa usa ka pipila ka mga sal panahon;
• sa diha nga hover kamo sa mouse pointer sa ilang kalihukan kinahanglan mohunong.

Sa pagbuhat niini, sa pagpahayag kita sa duha ka mga baryable: slidewidth (sama sa gitas-on sa slide) ug slidertime (motino sa panahon sa mga slide show). timer Ang magsugod sa diha nga ang panid mao ang bug-os nga puno site. Pinaagi niini nga sukaranan nga atong ihigot ang mga aksyon sa mouse pointer nagtudlo ngadto sa usa ka slide (nga pag-undang sa slide show).

Siguroha sa pagreseta ul gitas-on nga sudlanan. Kini mahimong sama sa gidaghanon sa mga slide, gipadaghan sa gitas-on sa matag slide.

Sal-ot sa function responsable sa usab-usab nga mga slide. Nga ang tanan nga, nga imong mahimo sa check sa performance sa imong slider.

konklusyon

Sa niini nga artikulo kita mitan-aw kon sa unsang paagi sa paghimo sa ilang kaugalingon nga JQuery-sliders sa sal-ot sa usa ka pahina sa iyang website. Pinaagi sa paggamit sa panig-ingnan sa usa ka yano nga slider, mahimo ikaw moabut sa uban sa ilang kaugalingon nga hubad sa kahulogan sa niini, sa paghimo sa angay nga mga kausaban sa tinubdan code. Kini pagpalambo sa disenyo ug paghimo sa paggamit sa sa imong site nga mas sayon alang sa mga bisita.