Cum de a crea un cursor simplu și rapid de imagine de pe jquery

Deja de mai multe ori mi-a cerut să-ți spun cum să faci un cursor pentru JS, dar nu spun. Principalul motiv - pentru că ei nu știu cum.

La un moment dat am dat seama că cursorul este uneori mai ușor să scrii decât să se uite gata. Așa că vreau să vă oferim o lecție despre crearea unui astfel de cursor. usor sa de a face propriile mâini, iar codul durează mai puțin de 2 Kb.

Creați slider imagine. Dimensiunile nu contează, doar imaginea trebuie să fie de aceeași dimensiune. Înainte de a conecta script-ul care vă conectați jQuery:

Crearea unui cursor

Pentru a controla meniul cursor pentru a fi utilizat cu cercurile albe, fila activă va fi verde. Meniul este creat în mod dinamic. Sarcina webmaster - pentru a crea o listă de imagini și de a atribui claselor corecte. Pagina poate fi plasat orice număr de cursoare, reciproc munca, ei nu interferează.

Codul slider va fi:

Pentru a controla cursorul nevoie de acest cod:

Și sunt necesare stiluri pentru glisorul:

După cum puteți vedea, codul este foarte simplu. Am făcut în mod specific diferite stiluri de tranziții, și sa oprit la simplu slide-derulare înapoi. În plus, un diapozitiv automat nu se va schimba. Nu știu cum cineva, dar mă irită orice animație pe pagină, care se face fără știrea mea.

Mărimea blocului implicit de 700 x 290 pixeli, acesta poate fi modificat în mod arbitrar. Nu uitați să actualizați CSS după ce modificați dimensiunea imaginilor.

Demo și descărcare

„Date-POST_ID = "5914" date-user_id = "0"= "0" date-lang = "ro"-decom_comment_single_translate date is_need_logged-date = "comentariu"-decom_comment_twice_translate date = "comment" date-decom_comment_plural_translate = "komentarіv" date-multiple_vote = "1" date-text_lang_comment_deleted = 'komentarijah Vidal' date-text_lang_edited = "Vіdredagovano de" date-text_lang_delete = "Vidaliti"-text_lang_not_zero date = "câmpul nu este NULL" „câmp obov'yazkove Tse = text_lang_required-date. " = "Oberіt unul dintre punktіv" text_lang_checked-date = text_lang_completed-date "Operatsіyu completate" text_lang_items_deleted-date = "Ob'єkti Bulo Vidal" date-text_lang_close = "tip închis" date-text_lang_loading = "Zavantazhennya.">

Adăugați un comentariu

Vibachte pentru komentuvannya neobhіdno uvіyti.

120 komentarіv

Funcția de scriere pliz la flipping cursorul prin fotografii

Dacă sunteți deja înfășurați $ (selectorul) într-o variabilă, nu aveți nevoie de această variabilă zavorchivat din nou $ (variabilă), crearea unui obiect nou. Acest lucru este greșit și irațional.

Cursorul este mare, dar nu redimensiona imaginile în funcție de dimensiune, cum să rezolve această problemă?

Cum se introduce cursorul la un site web HTML static ??

Bine ai venit! Tu în versiunea demo, butonul de comutare pe un fundal transparent. Eu le-au produs pe un fundal gri. Se obține dreptunghi lung la partea de jos a cursorului. Te rog spune-mi cum să scap de ea?

@NUR,
o unitate de control în CSS, el are un .nav nume, se pare că aveți deja .nav, în acest caz, se aplică stilul și cursorul. Verificați disponibilitatea celui de al doilea .nav dacă puteți găsi - cel mai simplu mod de a schimba atributul pentru glisorul.