Добър ден, скъпи читателю! Сега искам да споделя с вас опита за създаване на интересен слайдер. Предизвикателството се състои в сайта е слайдър телефон с възможност за промяна на фона и текста чрез промяна на изображението. За изпълнение на тази задача като основа взех TMS плъзгача. Сама по себе си, е в състояние да създаде слайдер от група от изображения и е в състояние да вмъкнете текст върху снимката, но имах нужда от повече: страниране трябва да е от образите на икони и диви нуждаят от втори текст. По принцип, цялата идея е да се промени класа на обекта с помощта на JQuery. Е, след като се запозна с проблемите започват да се справим с тях.

Официалният уебсайт на TMS плъзгача можете да научите как да се свържете с обекта, аз ще ви кажа как да го променя.

Подготовка на HTML и CSS

Първо, бих променил входните данни на плъгина:

и регулирайте изходните данни в HTML. Тук аз използвах заглавието атрибут към изхода втора дива с текста, който след това ще се появи в banner_content на дива. Div банер, сключен между всеки

След тези препарати, първото нещо, което ме порази - плъзгача номерирането вместо kruglishkov бих искал да видите иконата на вашите изображения. За тази цел, стигнах до промяна на стилове на CSS. Това е всичко, което е останало от страниране стил:

Всеки диви страниране дисплеи в background'e изображение чрез CSS стил е удобно в случай на промяна на имиджа на активна и пасивна форма:

На този етап, иконите в номерацията на страниците няма да се показват за това ние трябва да правим промени в сценария на TMS слайдер, който ние трябва да се пристъпи към следващия етап.

tms.js редактиране

Следваща по пътя ни ще се редактира функция changeFu. който е отговорен за процеса на слайдшоуто. Някъде в края на тази fukntsii след _.showFu (), въведете кода, който ще промените фоновото изображение и да се скрият в текста на втория дива с текста:

След това се премести в afterShow на функция. Nazavnie Функции говори за себе си. Това би било необходимо да се промени един ред и добави още:

Сега функцията parseImgFu. който е отговорен за събиране на информация от кода на HTML, че при условие, плъзгач. Намерете реда в една линия, всеки _.itms [в] = $ (това) .attr ( "SRC") и я поставете под два реда, който ще носи името на класа и текстът за втори дива:

Име paginationFu функции само говори за себе си, той ще трябва да си поиграете с кода за показване на миниатюрите. Намираме _.pags.append линия (li.append ( "")) И да го замени с:

И накрая, ние откриваме функция bannersFu. който показва текста в DIV на банера. В него, ние трябва да намерим линията _.bannerShow (_ _ банер = bnnrs [_ шоу.] .appendTo (_ мен), _...) и се заменя с две:

Ами в тази редакция на сценария е завършен, можете да запишете файла и да видим какво ще стане. Но се оказа, бъркотия, която искате да легна с помощта на CSS стилове за нашите divs.

И само за стила на интернет и уеб сайта. Един пример за този плъзгач може да бъде видяна на сайта на 2А софтуер на компанията

На този всички промени приключите, можете да се насладите на работата и се опитайте това творение. Докато се срещнем отново!

За всички въпроси по obraschatsya [email protected]