Creați slider uimitoare pe birou jquery, web-master - crearea și menținerea site-uri web

Astăzi vom învăța pentru a crea un conținut slider minunat pe jquery.

slider simplu și funcțional conținut ne va ajuta în orice situație: este necesar să se plaseze o imagine, un link, sau pur și simplu text? glisor nostru toate pot!

Să trecem la afaceri în curând. Creați un aspect simplu pentru cursorul nostru:

Totul este simplu. div class = „alunecare“ - un bloc în care conținutul diapozitivului. Am pus la celălalt bloc, l-au întrebat mărimea și umplut cu culoare. Câte blocuri de diapozitiv clasa. multe slide-uri în glisor nostru.

Acum, la stiluri:

Nu este nimic de explicat, nimic complicat. Pentru a controla butoane sunt utilizate pe imagini, restul este simplu.

Și acum perechea-pam-pam, script-ul în sine (nu uitați să pre-conectați jQuery ultima versiune):

Potrivit acestuia, un pic explica. 1. Se creează un buton de comandă circulară (situat în partea de jos dreapta) - care vă permit să mergeți prin slide-uri - clasa slider de control cu ​​etichete încorporate se întind cu clasele de control-slide. cerc activ Există o clasă de activă. 2. Se creează butoane glisante la dreapta sau la stânga (apar atunci când mutați cursorul) - pentru următoarele clase și, respectiv, prev. Aspectul butoanelor de control pentru a seta stilul.

De asemenea, script-ul are mai multe opțiuni: 1. var SlideSpeed ​​= 700; - numărul 700 - este viteza de diapozitive. Acesta este exprimat în milisecunde. 2. var TimeOut = 3000; - numărul 3000 - o întârziere înainte de schimbarea automată de diapozitive. Acesta este exprimat în milisecunde. Asta e tot, slider nostru conținut minunat gata.

Tot codul în întregime:

Pentru cei care nu au nevoie de butoanele de control spre dreapta sau spre stânga

Doar folosiți următorul script:

Și următoarele stiluri: