Pirtûkxaneya jQuery: Xefetiyê ji bo malpera te

Bi stendina ji dem û pêşketina teknolojiya di warê web design tên guhertin û pêdiviyên / daxwazên bikarhênerên malperên content. Eger berî ku ew bi piranî naveroka text bi hejmareke piçûk a images tematîk bû, îro jî ew hêmana sereke ya grafika e. Ev destûrê dide te ku zû agahiyên pêwist herî û kêrhatî, û çi dema wunda ne xwendina tekstên dirêj. Di vê diçe gel û, di rastiyê de, a element pêwîst ji web page Xefetiyê in. ji images to girêdan - Ew blokên bi naverok bi cur ên di wan de ne. A rê modern ji bo lê zêde bike a object web dayîn - bikaranîna kitêbxaneyê jQuery. Sliders afirandin bi vê tool, get a rehet, bikaranîna wê hêsan e, û bi dilxwazî pir balkêş e. Next em li ku çawa ji bo ku ev element ji rûpelên webê de li ser xwe bi xwe binêrin. Sipas ji bo hejmareke mezin ji amûrên standard, mimkun e ji bo pêkanîna jQuery surguyê-type û naveroka cur bi cur.

How to add a surguyê li ser web page?

Rêyên lê zêde bike a slide-blokan ji bo vê rûpela Hejmara. Gelek caran jî ne ji bo nivîsandina HTML-code û piyên xwe di nav script. e ku hejmareke berçav ji pirtûkxaneyên free, sihik * bikarhênerên a şablonan amade ye ku bila hûn lê zêde bike jQuery-Xefetiyê li ser malpera te heye. Hemû ku divê hûn bikin - ew e, ku ev kopî nav kodê çavkanîyê de yên malpera xwe û bi kêf results. Lê belê, di vê rewşê de ji îhtîmala pêkanîna xeyalê xwe yê afirandêr bi sînor e. Ji ber vê yekê, wê kêrhatî be ku bikaribe biafirîne element design ya serbixwe ye. Ji bo vê jî, divê hûn bizanibin ku çawa ji bo pêkanîna surguyê sade jQuery, û tenê ew dijwar dibe, hun dikanin her tim got, hêmanên zêde di code.

Create a surguyê destê xwe: Di HTML koda ku ji

Pêşî, ji kû dest pê - e ji bo qeydkirina layout pêşeroja sirgûyê.

1. Avakirin, li IP-file beşa Slideshow, ku hemû ji berbisk me de dihewîne, wê (images, û hwd.).
2. Ev canê lîsteya ul, her paragraf yên ku dê slide cuda bikim.

Em bi xebata bi CSS

Piştre em ji bo ev daxwaz û taybetiyên wan style xwest bi bikaranîna CSS-document. Ev pêwîst ferz naveroka me jQuery surguyê baş kar e û sîmaya mafê hebû. Di vê astê de, em bi bi Erkên rû:

• bicîh bikin ku li ser yekîneya Slideshow ya maskeya bi tenê yek, tam jî di wê kêliya slide (an jî naveroka picture), û ya din jî veşartî bûn;
• eyar slaytê yek li pey ya din (ji çepê ber bi rastê);
• do ul-konteynir, ku bimije û berbisk movable (çepê û rastê).

Ji bo vê jî, set vebijarkên li jêr li CSS-file:

• ji bo Slideshow: overflow-x - kitêbeke overflow-y - veşartî:
• ji bo ul: float - hiştin.

Jî hûn dikarin bi parametreyên ji width (width), bilindahî (height), background (background) û da (cisn).

Em vê kodê li jQuery kirin

HTML û CSS hemû guherandinên pêwîst hatin kirin. Ev dimîne doz ji bo code jQuery, Xefetiyê, ku divê Hirç heye:

• Slides divê li hev û din a interval dem hinek bisekine;
• gava ku tu hover de şanîdera mişkê li ser tevgera wan, divê rawestin.

Ji bo vê, em îlan du fakter: slidewidth û slidertime (ji bo dirêjahiya ya slide wekhev) (destnîşan dema bi yaweriya). The timer dê dest pê bike, gava ku rûpel e bi temamî site kerekî. By ev parametre em vê çalakiyê de yên pointing şanîdera mişkê girêbide û ji bo slide (ku jê bernade, bi yaweriya).

Hûn bawer bin ku dermanan length konteynir ul. Ev ji bo ku hejmara berbisk dibûn, ji ber dirêjahiya her slide wekhev be.

Têxe function berpirsiyar bo guhertina berbisk. Ji ber vê, hemû, tu karê surguyê xwe kontrol bike.

encamê de

Di vê nivîsê de em li ku çawa ji bo xwe jQuery-Xefetiyê xwe bi cîh a rûpel ji malpera xwe nêrî. Bikaranîna de mînaka surguyê sade, tu dikarî bê up bi şîrovekirina xwe bi xwe jî, ji çêkirina Guherandinên minasib ji bo qoda çavkanî ya. Ev ê design baştir û bi kar bînin numreya te xweşkeys de zêdetir ji bo mêvanan.