Hogyan hozzunk létre egy fotó csúszka segítségével jQuery és CSS3

LPgenerator - Profi Céloldal Platform növelni értékesítését a vállalkozás

Leszállás SHOP képzés a műveletet a PARTNERS

Ebben a leckében fogjuk létrehozni jQuery csúszka segítségével „Nivo Slider jQuery Script” és a CSS3. Fogjuk használni a „Nivo Slider jQuery script”, mert ez egy hatékony eszköz, és ez teljesen ingyenes. Ez a szkript 16 átmeneti hatások, ez egy egyszerű, rugalmas, és sok érdekes funkciókat. Akkor azt szinte bárhol és szinte minden projekt, beleértve a személyes és kereskedelmi weboldalak és bármilyen sorrendben teszik WordPress, például.

1. lépés: Az alap HTML jelölőnyelv

Először le kell töltenie a jQuery Nivo Slider script itt. Csak akkor kell a két fájlt a csomagból, amit letöltve: „Nivo-slider.css” és a „jquery.nivo.slider.pack.js”.

Ezután hozzon létre egy alap HTML jelölőnyelv, és adjunk hozzá „Nivo Slider” CSS és JS fájlokat. Ezen kívül meg kell csatolni a jQuery könyvtár, a legújabb verzióját a Google által üzemeltetett, vagy ha akarod, akkor helyezze a szerver, a választás a tiéd.

Letöltéséhez jQuery csúszka Nivo, mi kell hozzá még néhány sornyi kódot záró címke. Azt is be kell állítani néhány lehetőséget arra, hogy látható kontroll, változtassa meg a fedettség a fejléc és a változás az előző és a következő szöveget dia nyilak.

2. lépés Clayder HTML jelölőnyelv

Először létre kell hoznunk egy div class a „csúszka-wrapper” és „futurisztikusan téma”. Ezután hozzon létre egy div-azonosító „csúszik” és az osztály „nivoSlider”. Minden egyes dia hozunk létre .

3. lépés: Layout jQuery csúszka

Létrehozunk egy jQuery csúszka képek 300px széles és 180px magas. Amint hozzá 5px Betét (Amer. Padding), meg kell, hogy azonnal kivonni 10px szélességét és magasságát. Azt is kérik a háttérszín és a lekerekített sarkok.

Most jön a stílus a csúszkát. Kezdjük az elhelyezést és a központosító alján. Ha több mint négy diák meg kell változtatni a „bal”, annak érdekében, hogy központosítja a csúszkát.

Készítünk egy kört az egyes diák. Mert a stílus, akkor adjunk hozzá egy háttérszínt, árnyékok és lekerekített sarkokkal. Hogy elrejtse a „1,2,3,4” számozás hozzátesszük szöveget francia negatív értékkel.

Az aktív dia adunk hozzá egy zöld színátmenet, és módosítsa az árnyékban.

5. lépés: Következő és az Előző dia

Stílus a „következő és az előző csúszka, akkor helyezzük el a közepén, és adjunk hozzá az alapvető CSS stílusokat (betűtípus, méret, szín, stb)

6. lépés rovatok HTML jelölőnyelv

Ahhoz, hogy hozzon létre egy fejléc, létre kell hoznunk egy div az osztály „Nivo-HTML-feliratot» és véletlenszerű azonosítót (id). Társítani egy címet, a megfelelő diát, mi kell hozzá „title” a az azonos nevű, mint az id fejléc.

7. lépés: Stílus fejléc

Formázáshoz aláírás fogjuk változtatni a szöveg színét, betűtípust és méretet. Mi is használja ugyanazt a zöld színátmenet, hogy mi használt.

FIGYELEM! Ön egy elavult böngészőt használ Internet Explorer

Ez a weboldal épül a fejlett, korszerű technológiák és nem támogatja az Internet Explorer a második és a hetedik változat.

Kapcsolódó cikkek

• Hogyan lehet létrehozni egy infographic fogaskerekek segítségével vectorscribe és Adobe Illustrator - rboom