JQuery-bibliotek: reglage för din webbplats

Med tidens gång och utvecklingen av teknik iområdena för webbdesign förändras och användarnas behov / krav på innehållswebbplatser. Om det tidigare var det huvudsakligen textinnehåll med ett litet antal tematiska bilder, är grafikkomponenten idag den dominerande. Det ger dig möjlighet att få maximal användbar och användbar information på kort tid, och inte slösa bort tid på att läsa långa texter. I detta avseende är allt mer populära och dessutom en väsentlig del av webbsidor reglagen. De är block med varierande innehåll i dem - från bilder till länkar. Ett modernt sätt att lägga till detta webbobjekt är att använda JQuery-biblioteket. Slider som skapats med hjälp av det här verktyget är lätta att använda, enkla att använda och ser väldigt imponerande ut. Därefter tittar vi på hur du gör dessa element på en webbsida själv. Tack vare ett stort antal standardiserade verktyg blir det möjligt att implementera jQuery-reglage av olika typer och olika innehåll.

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

Sätt att lägga till reglage på sidanplats några. Ofta behöver du inte ens skriva HTML-kod och gå in i manuset. Det finns många gratisbibliotek som erbjuder användare redan färdiga mallar, vilket gör det möjligt att lägga till jQuery-reglagen till din webbplats. Allt som krävs av dig är att kopiera det till källkoden på din webbsida och njut av resultatet. Men i detta fall är möjligheterna att förverkliga dina kreativa fantasier begränsade. Därför blir det överflödigt att kunna skapa detta designelement själv. För att göra detta måste du veta hur man implementerar en enkel jQuery-reglaget, och du kan alltid komplicera det genom att lägga till ytterligare element i koden.

Skapa en reglage själv: koden i HTML

Det första som ska börja är att skriva ned layouten för den framtida reglaget.

Skapa ett bildspel block i HTML-filen, som innehåller alla våra bilder (bilder etc.).
I det lägger vi en lista över ul, varav varje produkt kommer att lagra en separat bildruta.

Arbetar i CSS

Då tillämpar vi de nödvändiga egenskaperna för denstil, med hjälp av ett CSS-dokument. Det är nödvändigt att JQuery-innehållsreglaget vi skapade fungerar korrekt och har den önskade formuläret. I detta skede har vi följande uppgifter:

För att se till att endast en bild visas i bildspelet (bilden eller innehållet som behövs för tillfället) och resten var gömda.
ordna objektglas efter varandra (från vänster till höger);
gör den ul-behållare i vilken bilderna är lagrade, rörliga (vänster och höger).

För att göra detta ställer vi in följande parametrar i CSS-filen:

för bildspel: överfyllning-x-rulla, överfyllning-y-dold:
för ul: flyta - vänster.

Du kan också ställa in bredd, höjd, bakgrund och så vidare.

Vi skriver kod i jQuery

I HTML och CSS har alla nödvändiga ändringar gjorts. Det återstår att fungera bakom JQuery-koden, där reglagen i vilka ska ha följande parametrar:

diabilder ska bytas ut med varandra med ett visst tidsintervall;
När du sveper muspekaren ska deras rörelse stoppa.

För detta förklarar vi två variabler: bildbredd (lika med längden på objektglaset) och glidtid (specificerar perioden för glidförändringen). Timern kommer att startas när sidan på webbplatsen är fullt laddad. Till den här parametern knyter vi åtgärden att sväva muspekaren på objektglaset (vilket stoppar glidförändringen).

Var noga med att ange längden på behållaren ul. Det blir lika med antalet bilder som multipliceras med längden på varje bild.

Vi lägger in funktionen som är ansvarig för att byta bilder. Det är allt, du kan kontrollera arbetet med din reglage.

slutsats

I den här artikeln såg vi på hurSkapa självständigt jQuery-reglaget för att infoga på sidan på din webbplats. Med ett exempel på en enkel sliderimplementering kan du skapa egna variabler av sin tolkning, och göra lämpliga ändringar av källkoden. Detta kommer att förbättra designen och göra användningen av din webbplats bekvämare för besökare.