Как да се създаде проста и бърза слайдер изображение на JQuery
Вече няколко пъти ме помоли да ви кажа как да се направи плъзгач, за да JS, но аз не казвам. Основната причина - защото те не знаят как.
В един момент осъзнах, че плъзгача понякога е по-лесно да се напише, отколкото да изглежда готова. Затова искам да Ви предложим урок за създаването на такъв плъзгач. Нейната лесно да се направи собствените си ръце, и кода отнема по-малко от 2 Kb.
Създаване на плъзгача изображение. Размерите не са от значение, само изображението трябва да е със същия размер. Преди да свържете скрипт, който да свържете JQuery:
Създаване на плъзгача
За да контролирате менюто плъзгач, за да се използва с бели кръгове, активният раздела ще бъде зелен. Меню се създава динамично. Задачата на уебмастера - за да създадете списък с изображения и да зададете правилните упражнения. Страницата може да бъде поставена на произволен брой плъзгачи, работата на другите, те не пречат.
плъзгач код ще бъде:
За контрол на плъзгача нужда от този код:
И са необходими стиловете за плъзгача:
Както можете да видите, че кодът е много проста. Аз специално направихме различни стилове на прехода, и спря на проста назад слайда. В допълнение, автоматичен слайд няма да се промени. Аз не знам как някой, но това ме дразни всяка анимация на страницата, която е направена без моето знание.
стандартния размер на блок от 700 х 290 пиксела, тя може да се променя произволно. Не забравяйте да обновите своята CSS, след като промените размера на изображения.
Демонстрация и изтегляне
"Data-POST_ID =" 5914 "на данни user_id =" 0 "данни is_need_logged =" 0 "данни Lang =" ен "на данни decom_comment_single_translate =" коментар "данни decom_comment_twice_translate =" коментар "данни decom_comment_plural_translate =" komentarіv " данни multiple_vote = "1" данни text_lang_comment_deleted = 'komentarijah Видал "данни-text_lang_edited =" Vіdredagovano на "данни text_lang_delete =" Vidaliti "данни text_lang_not_zero =" поле не е нула "данни text_lang_required =" Цзе obov'yazkove област. " данни text_lang_checked = "Oberіt един от punktіv" данни text_lang_completed = "Operatsіyu завършен" данни text_lang_items_deleted = "Ob'єkti Bulo Видал" данни text_lang_close = "затворен" данни text_lang_loading = "Zavantazhennya.">
Добавете коментар
Vibachte за komentuvannya neobhіdno uvіyti.
120 komentarіv
Pliz запис функция, за да си щракнал плъзгач чрез снимки
Ако вече сте увийте $ (селектор) в променлива, че не е необходимо тази променлива отново zavorchivat в $ (променлива), създаване на нов обект. Това е грешно и ирационално.
Плъзгачът е страхотно, но не преоразмерявате изображения, като размер, как да се реши този проблем?
Как да поставите плъзгача на уебсайт статичен HTML ??
Добре дошли! Вие в демо версия, бутонът включете прозрачен фон. Имам ги произвеждат на сив фон. се получава дълъг правоъгълник в долната част на плъзгача. Моля, кажете ми как да се отървете от него?
@NUR,
управляващо устройство, CSS, той има име .nav, изглежда, че вече имате .nav, в този случай, стилът се прилага и плъзгача. Проверете за наличността на втория .nav дали можете да намерите - най-лесният начин да се промени атрибута за плъзгача.