JQuery Library: reglagen för din webbplats

Med tidens gång och teknikutvecklingen inom webbdesign förändras och behoven / kraven från användarna till innehållswebbplatser. Om tidigare var det mestadels textinnehåll med ett litet antal tematiska bilder, det är idag den dominerande delen av bilden. Det gör att du snabbt få ut det mesta nödvändig och användbar information, och inte slösa tid med att läsa långa texter. I samband med detta allt populärare och i själva verket en nödvändig del av en webbsida är reglagen. De är block med varierande innehåll i dem - från bilder till länkar. Ett modernt sätt att lägga ett givet webbobjekt - med hjälp av JQuery biblioteket. Sliders skapats med det här verktyget, få en bekväm och enkel att använda, och ser mycket imponerande. Nästa vi tittar på hur man gör dessa delar av webbsidor på egen hand. Tack vare ett tillräckligt stort antal standardiserade verktyg, är det möjligt att genomföra JQuery reglaget-typ och varierande innehåll.

Hur man lägger till ett reglage på en webbsida?

Olika sätt att lägga till en bild-block till sidan nummer. Ofta behöver inte ens att skriva HTML-kod och gräva i skriptet. Det finns ett stort antal fria bibliotek, som erbjuder användarna en färdiga mallar som låter dig lägga JQuery-reglagen på din webbplats. Allt du behöver göra - är att kopiera den i källkoden för din webbsida och njuta av resultatet. Men i detta fall möjligheten att förverkliga din kreativa fantasi är begränsad. Därför är det bra att kunna skapa designelement självständigt. För att göra detta måste du veta hur man ska genomföra den enkla jQuery reglaget, och bara komplicera det, kan du alltid lägga till extra element i koden.

Skapa ett reglage själv: i HTML-koden

Först var man ska börja - är att registrera den framtida utformningen av reglaget.

1. Established in HTML-fil Bildspel enhet, som kommer att innehålla alla våra diabilder (bilder, etc.).
2. Den låg ul listan, varje stycke som kommer att lagra en separat bild.

Vi arbetar med CSS

Då gäller vi det egenskaperna hos önskad stil med hjälp av CSS-dokument. Det är nödvändigt att införa vårt innehåll JQuery reglaget ska fungera och hade rätt utseende. I detta skede står vi inför följande uppgifter:

• se till att på bildspel enheten visar endast en, precis i det ögonblick bilden (eller bildinnehåll), och resten var dolda;
• ordna sliderna efter varandra (vänster till höger);
• gör ul-container, som lagrar bilderna rörlig (vänster och höger).

För att göra detta, ange följande alternativ i CSS-fil:

• för Bildspel: overflow-x - rulla, overflow-y - gömd:
• för ul: float - vänster.

Även du kan ställa in parametrarna för bredden (bredd), höjd (höjd), bakgrund (bakgrund) och så vidare.

Vi lägger denna kod i JQuery

HTML och CSS alla nödvändiga ändringar har gjorts. Det återstår fallet för JQuery koden reglage, som ska ha följande parametrar:

• Slides skulle lyckas varandra med ett visst tidsintervall;
• När du håller muspekaren över deras rörelse skulle upphöra.

För att göra detta, vi förklarar två variabler: slidewidth (lika med längden av bilden) och slidertime (bestämmer perioden för bildspel). Timern startar när sidan är fullastad webbplats. Genom denna parameter knyter vi effekten av muspekaren som pekar på en bild (som stoppar bildspelet).

Var noga med att förskriva ul container längd. Det kommer att vara lika med antalet objektglas, multiplicerat med längden på varje objektglas.

Sätt den funktion som ansvarar för hur bilderna. Det är allt, du kan kontrollera prestanda reglaget.

slutsats

I den här artikeln såg vi på hur man skapar sina egna JQuery-reglagen för att infoga en sida på sin webbplats. Med hjälp av exempel på en enkel skjutreglage kan du komma med sin egen tolkning av den, vilket gör lämpliga ändringar i källkoden. Detta kommer att förbättra designen och använda din webbplats mer bekvämt för besökare.