Minden, ami a számítógépek - egy csúszka, változik a háttér és a szöveg dia

Jó napot, kedves olvasó! Most szeretném megosztani veletek a tapasztalat létre egy érdekes csúszkát. A kihívás az volt, hogy a helyszínen volt egy szétcsúsztatható telefon, amely képes megváltoztatni a háttér és a szöveg megváltoztatásával a képet. A feladat elvégzéséhez alapul vettem TMS csúszkát. Önmagában is képes létrehozni egy csúszka a képek csoportját, és képes szúrni a szöveget a kép fölé, de én nagyobb szükség van: lapszámozás kell lennie a képeket ikonok és Divas szükség második szöveget. Alapvetően az egész ötlet, hogy változtatni az objektum osztály jQuery. Nos, miután megismerte a problémák kezdenek foglalkozni velük.

A hivatalos honlapja a TMS slider meg lehet tanulni, hogyan kell csatlakoztatni a helyszínen, azt fogja mondani, hogyan változott meg.

Előállítása HTML és CSS

Először is, én változott a bemenő adatokat a plugin:

és állítsa be a kimeneti adatok HTML-ben. Itt szoktam a cím attribútum kiadási második díva a szöveget, amely majd megjeleníti a díva banner_content. Div banner, között kötött minden

, Ezt mutatja a standard script TMS csúszka:

Az előkészületek után, az első dolog, ami meglepett - a csúszka lapszámozásról helyett kruglishkov Szeretném látni az ikont a képeket. Ebből a célból, elértem, hogy módosítsa a CSS stílusokat. Ez minden, amit nem engedélyezte a lapszámozás stílus:

Minden divas oldalszámozásra megjelenik background'e képet át CSS stílus kényelmes változás esetén a kép az aktív és passzív formája:

Ebben a szakaszban, az ikonok a lapszámozás nem fognak megjelenni erre van szükségünk, hogy módosítsa a TMS csúszka script, amit el kell végeznie a következő szakaszba.

szerkesztés tms.js

Következő utunkra kerül szerkesztési funkció changeFu. amely felelős a folyamat a diavetítés. Valahol a végén ez fukntsii után _.showFu () illessze be a kódot, amely meg fogja változtatni a háttérképet, és elrejti a szöveg a második díva a szöveggel:

Ezután lépjen a funkció after. Nazavnie funkciók önmagáért beszél. Szükséges lenne változtatni egy vonal és egy újabb:

Most a funkció parseImgFu. amelynek feladata az információgyűjtés a html kódot, amit nyújtott csúszkát. Keresse meg a sort egy hurok minden _.itms [i] = $ (this) .attr (src), és helyezze alá a két sor, amely megteszi a nevét az osztály és a szöveg a második díva:

Név paginationFu funkciók csak önmagáért beszél, akkor azt a csípés a kódot a képekre. Találunk _.pags.append vonal (li.append („)), És cserélje ki:

És végül, azt látjuk, a funkció bannersFu. amely megjeleníti a szöveget a banner div. Ebben, meg kell találnunk a vonal _.bannerShow (_ banner = _ bnnrs [_ show.] .appendTo (_ me) _...), és helyébe két:

Nos ebben szerkesztő a szkript befejeződött, akkor mentse a fájlt, és meglátjuk, mi történik. De kiderült, a rendetlenség, azt szeretnénk, hogy feküdt a CSS stílusokat a divs.

És csak a stílus az internet és a honlapon. Erre példa a csúszka megtekinthető a társaság honlapján 2A Software

Ennél minden változás befejeződött, élvezheti a munkát, és próbálja meg ezt a teremtést. Míg újra találkozunk!

Minden kérdésre obraschatsya [email protected]