Oare ceasul zilei, draga cititor! Acum vreau să vă împărtășesc experiența în crearea unui slider interesant. Sarcina a fost ca site-ul să aibă un glisor cu capacitatea de a schimba fundalul și textul atunci când schimbați imaginile. Pentru a pune în aplicare această sarcină ca bază, am luat cursorul TMS. De la sine, el poate crea un glisor dintr-un grup de imagini și poate introduce text peste imagine, dar am nevoie de mai mult: paginarea ar trebui să fie din icoanele imaginilor și aveți nevoie de un al doilea div cu textul. Practic, ideea este de a schimba clasa obiect folosind jQuery. Ei bine, după ce ne-am familiarizat cu problemele, vom începe să le rezolvăm.
Pe site-ul oficial al glisorului TMS puteți afla cum să îl conectați la site, vă voi spune cum l-am schimbat.
Gătit HTML și CSS
În primul rând am schimbat intrarea plugin-ului pentru:
și a configurat ieșirea de informații în HTML. Aici am folosit atributul title pentru a scoate al doilea div cu textul, pe care apoi îl voi afișa în diva banner_content. Dave banner, încheiat între fiecare
, este generat de scriptul standard TMS slider:După aceste preparate, primul lucru care mi-a prins ochiul - sliderul de paginare, în loc de kruglishki aș vrea să văd icoanele imaginilor lor. Pentru a face acest lucru, am venit să schimb stilurile CSS. Asta-i tot ce am lăsat din stilul de paginare:
Fiecare paginare div afișează în fundal o imagine prin stilul CSS, este convenabilă în cazul schimbării imaginii în formă activă și pasivă:
În această etapă, icoanele din paginare nu vor fi afișate, pentru aceasta avem nevoie să facem modificări în scriptul de slider TMS, pe care îl vom face în etapa următoare.
Editarea tms.js
Următorul pas din editarea noastră este funcția changeFu. care este responsabilă de procesul de schimbare a diapozitivelor. Undeva la sfârșitul acestei funcții după _.showFu () introduceți codul care va schimba imaginea de fundal și va ascunde textul celei de-a doua divuri cu textul:
Apoi treceți la funcția afterShow. Funcția în sine vorbește de la sine. În acesta, ați schimba o linie și adăugați o altă linie:
Acum funcția parseImgFu. care este responsabil pentru colectarea de informații de la codul html pe care le-am furnizat la cursor. Vom găsi o linie în ciclul fiecare _.itms [i] = $ (this) .attr ('src') și sub el vom introduce două linii care vor lua numele de clase și textul pentru al doilea diva:
Numele funcției paginationFu mai vorbește de la sine, va trebui să corecteze codul pentru afișarea miniaturilor. Găsiți șirul _.pags.append (li.append ('')) și înlocuiți-l cu:
Și, în sfârșit, găsim funcția bannersFu. care afișează textul în banner-ul div. În acesta, trebuie să găsim linia _.bannerShow (_ Banner = _. Bnnrs [_. Show] .appendTo (_.Me), _) și să o înlocuiți cu două:
Ei bine, pe această editare scenariul se termină, puteți salva fișierul și puteți vedea ce sa întâmplat. Și sa dovedit o mizerie, pe care trebuie să o curățați cu stilurile CSS pentru divas.
Și, de asemenea, pentru stilul de internet și site-ul web. Un exemplu al acestui cursor poate fi găsit pe site-ul 2A Soft
Pe această schimbare se termină, vă puteți bucura de munca făcută și puteți încerca această creație. Până data viitoare!
Pentru toate întrebările, vă rugăm să contactați [email protected]
Trimiteți-le prietenilor: