Плъзгач с помощта на js. Лек професионален javascript CSS3 слайдер

Ако трябва да добавите висококачествен плъзгач за изображения на jQuery към вашия сайт, тогава в тази статия ще намерите описание на необходимите добавки. Въпреки че JQuery направи работата с JavaScript много по-лесна, все още се нуждаем от добавки, за да ускорим процеса на уеб дизайн.

Можем да направим промени в някои от тези добавки и да създадем нови слайдери, които са много по-подходящи за целите на нашия сайт.

За други плъзгачи просто добавяте заглавия, изображения и избирате ефекти за преход на слайдове, които идват с плъзгача. Всички тези добавки са придружени от подробна документация, така че добавянето на нови ефекти или функции към тях няма да е трудно. Можете дори да промените тригери, базирани на събития, ако сте опитен JQuery програмист.

Най-новите тенденции като отзивчив дизайн са много важни за уеб проекти, независимо дали внедрявате плъгин или скрипт. Всички тези елементи правят всеки от тези добавки много гъвкав. Всичко, което излезе през 2014 г., е включено в този списък.

jQuery плъзгачи за изображения

Jssor Responsive Slider

Наскоро попаднах на този мощен слайдер jQuery и успях да видя от първа ръка, че върши работата си много добре. Той съдържа неограничени възможности, които могат да бъдат разширени чрез отворения код на слайдера:

• Адаптивен дизайн;
• Повече от 15 опции за персонализиране;
• Повече от 15 ефекта за промяна на изображението;
• Галерия с изображения, въртележка, поддръжка на цял екран;
• Вертикален ротатор на банери, списък със слайдове;
• Видео поддръжка.

Демо | Изтегли

PgwSlider - отзивчив плъзгач, базиран на JQuery / Zepto

Единствената задача на този плъгин е да показва слайдове с изображения. Той е много компактен, тъй като JQuery файловете са с размер само 2,5 KB, което му позволява да се зарежда много бързо:

• Адаптивно оформление;
• SEO оптимизация;
• Поддръжка на различни браузъри;
• Прости преходи на изображения;
• Размерът на архива е само 2,5 KB.

Демо | Изтегли

Jquery вертикален плъзгач за новини

Гъвкав и полезен JQuery плъзгач, предназначен за новинарски ресурси със списък с публикации от лявата страна и изображение, показано отдясно:

• Адаптивен дизайн;
• Вертикална колона за превключване на новини;
• Разширени заглавки.

Демо | Изтегли

Уолоп плъзгач

Този слайдер не съдържа jQuery, но бих искал да го представя, тъй като е много компактен и може значително да намали времето за зареждане на страницата. Кажете ми, ако ви харесва:

• Адаптивно оформление;
• Опростен дизайн;
• Различни опции за смяна на слайдове;
• Минимален JavaScript код;
• Размерът е само 3KB.

Демо | Изтегли

Галерия на Polaroid в плосък стил

Галерия в стила на документи, разпръснати върху маса с гъвкаво оформление и красив дизайнтрябва да представлява интерес за много от вас. По-подходящ за таблети и големи дисплеи:

• Адаптивен плъзгач;
• Плосък дизайн;
• Произволна смяна на слайдове;
• Пълен достъп до изходния код.

Демо | Изтегли

А-плъзгач

Демо | Изтегли

HiSlider – плъзгач за изображения на HTML5, jQuery и WordPress

HiSlider представи нов безплатен плъгин JQuery слайдер, с който можете да създавате различни галерии с изображения с фантастични преходи:

• Адаптивен плъзгач;
• Не изисква познания по програмиране;
• Няколко невероятни шаблона и кожи;
• Красиви преходни ефекти;
• Поддръжка на различни платформи;
• Съвместим с WordPress, Joomla, Drupal;
• Възможност за показване на различни видове съдържание: изображения, Видео в YouTubeи Vimeo видеоклипове;
• Гъвкава настройка;
• Полезни допълнителни функции;
• Неограничено количество показвано съдържание.

Демо | Изтегляне

Уау плъзгач

WOW Slider е отзивчив слайдер за изображения на jQuery с невероятни визуални ефекти ( домино, завъртане, замъгляване, обръщане и светкавица, излитане, щори) и професионални шаблони.

WOW Slider идва със съветник за инсталиране, който ви позволява да създавате фантастични слайдери за секунди, без да се налага да разбирате код или да редактирате изображения. Версиите на плъгина за Joomla и WordPress също са налични за изтегляне:

• Напълно отзивчив;
• Поддържа всички браузъри и всички видове устройства;
• Поддръжка на сензорни устройства;
• Лесна инсталация на WordPress;
• Гъвкавост в конфигурацията;
• SEO оптимизиран.

Демо | Изтегляне

Nivo Slider – безплатен jQuery плъгин

Nivo Slider е известен по целия свят като най-красивия и лесен за използване слайдер за изображения. Плъгинът Nivo Slider е безплатен и е пуснат под лиценза на MIT:

• Изисква JQuery 1.7 и по-нова версия;
• Красиви преходни ефекти;
• Лесен и гъвкав за конфигуриране;
• Компактен и адаптивен;
• Отворен код;
• Мощен и прост;
• Няколко различни шаблона;
• Автоматично изрязване на изображението.

Демо | Изтегляне

Прост слайдер jQuery с техническа документация

Идеята е вдъхновена от плъзгачите на Apple, в които няколко малки елемента могат да излитат с различни анимационни ефекти. Разработчиците се опитаха да приложат тази концепция, като вземат предвид минимални изискванияза създаване прост дизайнонлайн магазин, в който „летящите“ елементи представляват различни категории:

• Адаптивно оформление;
• Минималистичен дизайн;
• Различни ефекти за отпадане и смяна на слайдове.

Демо | Изтегляне

Плъзгач на jQuery изображение в пълен размер

Много прост плъзгач, който заема 100% от ширината на страницата и се адаптира към размерите на екрана на мобилните устройства. Работи с CSS преходи и изображенията се „подреждат“ заедно с котвите. Котвата може да бъде заменена или премахната, ако не искате да прикачите връзка към изображението.

Когато е инсталиран, плъзгачът се разширява до 100% от ширината на екрана. Може също така автоматично да намали размера на изображенията в слайдове:

• Адаптивен JQuery плъзгач;
• Пълен размер;
• Минималистичен дизайн.

Демо | Изтегляне

Еластичен плъзгач за съдържание + урок

Плъзгачът за еластично съдържание автоматично регулира ширината и височината въз основа на размерите на родителския елемент. Това е прост jQuery слайдер. Състои се от област за плъзгане в горната част и лента с раздели за навигация в долната част. Плъзгачът регулира ширината и височината си според размерите на родителския контейнер.

Когато се гледат на екрани с малък диагонал, разделите за навигация се превръщат в малки икони:

• Адаптивен дизайн;
• Превъртане с щракване на мишката.

Демо | Изтегляне

Безплатен плъзгач за 3D стек

Експериментален плъзгач, който превърта през изображения в 3D. Двата стека приличат на купчини хартия, от които при превъртане в центъра на плъзгача се показват изображения:

• Адаптивен дизайн;
• Обръщане - преход;
• 3D ефекти.

Демо | Изтегляне

Slit Slider на цял екран, базиран на JQuery и CSS3 + урок

Този урок ще ви покаже как да създадете слайдер с обрат: идеята е да „изрежете“ и да покажете текущия слайд, докато отваряте следващото или предишното изображение. Използвайки JQuery и CSS анимация, можем да създадем уникални преходни ефекти:

• Адаптивен дизайн;
• Разделен преход;
• Плъзгач на цял екран.

Демо | Изтегляне

Unislider - много малък jQuery слайдер

Без ненужни звънци и свирки, с размер под 3KB. Използвайте всеки HTML код за вашите слайдове, разширете го с използвайки CSS. Всичко, свързано с Unslider, се хоства на GitHub:

• Поддръжка на различни браузъри;
• Поддръжка на клавиатура;
• Регулиране на височината;
• Адаптивен дизайн;
• Поддръжка на сензорно въвеждане.

Демо | Изтегли

Минимални отзивчиви слайдове

Прост и компактен плъгин ( размерът е само 1 KB), което създава адаптивен плъзгачизползване на елементите вътре в контейнера. ResponsiveSLides.js работи с голяма сумабраузъри, включително всички версии на IE от IE6 и по-нови:

• Напълно отзивчив;
• Размер 1 KB;
• CSS3 преходи с възможност за стартиране през JavaScript;
• Просто маркиране с помощта на списъци с водещи символи;
• Възможност за персонализиране на ефектите на прехода и продължителността на гледане на един слайд;
• Поддържа възможността за създаване на множество слайдшоута;
• Автоматично и ръчно превъртане.

Демо | Изтегляне

Камера - безплатен jQuery слайдер

Camera е плъгин с много ефекти на преход и адаптивно оформление. Лесен за настройка, поддържан от мобилни устройства:

• Напълно адаптивен дизайн;
• Подписи;
• Възможност за добавяне на видеоклипове;
• 33 различни цветни икони.

Демо | Изтегляне

SlidesJS, адаптивен jQuery плъгин

SlidesJS е адаптивен плъгин за JQuery (1.7.1 и по-нова версия) с поддръжка за сензорни устройства и CSS3 преходи. Експериментирайте с него, опитайте няколко готови примера, които ще ви помогнат да разберете как да добавите SlidesJS към вашия проект:

• Адаптивен дизайн;
• CSS3 преходи;
• Поддръжка на сензорни устройства;
• Лесен за настройка.

Демо | Изтегли

BX Jquery плъзгач

Това е безплатен отзивчив jQuery слайдер:

• Напълно отзивчив - адаптира се към всяко устройство;
• Хоризонтална, вертикална смяна на слайдове;
• Слайдовете могат да съдържат изображения, видеоклипове или HTML съдържание;
• Разширена поддръжка за сензорни устройства;
• Използване на CSS преходи за анимация на слайд ( хардуерно ускорение);
• API за обратно извикване и напълно публични методи;
• Малък размер на файла;
• Лесен за изпълнение.

Демо | Изтегляне

FlexSlider 2

Най-добрият отзивчив слайдер. Нова версияе модифициран за увеличаване на скоростта и компактността.

Демо | Изтегли

Galleria - базирана на JavaScript адаптивна фотогалерия

Galleria се използва в милиони сайтове за създаване на галерии с изображения високо качество. Броят на положителните отзиви за нейната работа е просто извън класациите:

• Напълно безплатно;
• Режим на преглед на цял екран;
• 100% адаптивен;
• Не се изисква опит в програмирането;
• Поддръжка на iPhone, iPad и други сензорни устройства;
• Flickr, Vimeo, YouTube и други;
• Няколко теми.

Демо | Изтегли

Blueberry - прост плъзгач за изображения на jQuery

Представям ви jQuery слайдер за изображения, написан специално за адаптивен уеб дизайн. Blueberry е експериментална приставка за плъзгач на изображения с отворен код програмен код, който е написан специално за работа с адаптивни шаблони:

• Минимален дизайн;
• Адаптивно оформление;
• Презентации.

Демо | Изтегли

jQuery Popeye 2.1

Са използвани стандартни елементипърва версия на програмата: плъзгачът изчезва вляво и изскача вдясно. Същите навигационни елементи и надписи, които изскачат при преместване на мишката:

• Адаптивен дизайн;
• Поддръжка на подпис;
• Режим на слайдшоу.

Демо | Изтегли

Адаптивният, или ако предпочитате, адаптивният уеб дизайн вече не е просто поредната тенденция в дизайна, той вече е определен стандарт за разработка на уебсайтове, осигуряващ гъвкавостта на уебсайтовете и хармоничното визуално възприятие на екраните на различни потребителски устройства. Съвсем наскоро, по време на разработка адаптивен шаблон, трябваше да се сблъскам с различни трудности при интегрирането на определени плъзгачи и галерии с изображения, без да нарушавам цялостния стил на дизайна. Сега всичко е много по-просто, съществува в Интернет голяма сума готови решенияи което е особено приятно е, че повечето от тях са вътре свободен достъп, отворен код.

Поради разнообразието от предлагани инструменти, компилирах кратък прегледнай-забележителните развития отзивчив jQueryплъзгачи за изображения, които се появиха наскоро и се разпространяват без никакви ограничения, т.е. абсолютно безплатно.

WOW плъзгач

Отзивчив плъзгач за изображения на jQuery със страхотен набор от визуални ефекти (въртене, изскачане, замъгляване, спирали, щори и т.н.) и много готови шаблони. С вградения съветник за вмъкване на страници на WOW Slider можете лесно и без усилие да създавате зашеметяващи слайдшоута за минути. Уебсайтът на разработчика съдържа цялата необходима документация за настройка и използване на приставката на руски език, както и отлични примери на живо за това как работи приставката. Предлага се и за изтегляне отделно Wordpress плъгини модул за Joomla. Сигурен съм, че мнозина ще харесат този прекрасен слайдер, както начинаещи, така и опитни уебмастъри.

HiSlider

HiSlider - HTML5, Jquery слайдер и галерия с изображения, абсолютно безплатен плъгин за лична употреба в сайтове, работещи с популярни системи - WordPress, Joomla, Drupal. С помощта на този прост, но доста функционален инструмент можете лесно да създавате невероятни и живи слайдшоута, зрелищни презентации и съобщения за нови съобщения на страниците на вашите уебсайтове. Няколко готови шаблона и кожи за слайдера, зашеметяващи ефекти за преход (промяна) на съдържанието, извеждане на различно мултимедийно съдържание: видеоклипове от YouTube и Vimeo, гъвкав потребителски настройкии т.н...

Nivo Slider

Nivo Slider е добър стар, добре познат на всички запознати, един от най-красивите и лесни за използване слайдери за изображения. Приставката JQuery Nivo Slider е безплатна за изтегляне и използване и е лицензирана съгласно лиценза на MIT. Има и отделен плъгин за WordPress, но за съжаление вече е платен и ще трябва да платите $29 за един лиценз. По-добре е да направите малко магия с файловете на WP темата и да прикачите безплатната jQuery версия на приставката Nivo Slider към вашия блог, тъй като има много информация как да направите това в Интернет.
Що се отнася до функционалността, всичко е наред с това в перфектен ред. Използван за работа jQuery библиотека v1.7+, красиви преходни ефекти, прости и много гъвкави настройки, адаптивно оформление, автоматично изрязване на изображения и много други.

Идеята за слайдера е вдъхновена от разработчиците, които са добре известни със стила на представяне на продуктите на Apple, където няколко малки обекта (снимки) се променят чрез щракване върху избраната категория с прост анимационен ефект. Codrops предоставя на ваше разположение подробен урокза създаване на този плъзгач, пълно оформление на HTML маркиране, набор CSS правилаи изпълним jQuery плъгин, както и прекрасен жив пример за използване на слайдера.

Slit Slider

Плъзгач за изображение на цял екран с помощта на JQuery и CSS3 + подробен урок за интегриране на приставката в страниците на уебсайта. Идеята е да нарежете отворения текущ слайд с конкретно съдържание, когато преминавате към следващото или предишното съдържание. СЪС използвайки JQueryИ CSS анимацииможете да създавате уникални преходи между слайдове. Отзивчивото оформление на плъзгача гарантира, че изглежда еднакво добре на всички екрани различни видовепотребителски устройства.

Еластичен плъзгач за съдържание

Плъзгач за съдържание, който автоматично се настройва по ширина и височина в зависимост от размера на родителския контейнер, в който се намира. Доста лесен за изпълнение и гъвкав в настройките, слайдерът работи на JQuery, с навигация в долната част; когато размерът на екрана се промени надолу, навигацията се показва под формата на икони. Много подробна документация (урок за създаване) и живи примери за употреба.

3D стек плъзгач

Експериментална версия на слайдера, която демонстрира изображения с преходи от 3D равнината. Изображенията са разделени на два хоризонтални стека, като се използват стрелките за навигация за промяна и преход на всяко следващо изображение към състояние на гледане. Като цяло нищо особено, но самата идея и техниката на изпълнение са доста интересни.

Много прост, 100% отзивчив плъзгач за изображения на jQuery на цял екран. Работата на плъзгача се основава на CSS преходи (свойството за преход) във връзка с магията на jQuery. Стойността на максималната ширина е зададена на 100% по подразбиране, така че размерът на изображенията ще се променя в зависимост от промените в размера на екрана. Няма специални анимационни ефекти или излишни украшения в дизайна, всичко е просто и съобразено непрекъсната работа.

Минимални слайдове

Името говори само за себе си, това е може би един от най-леките и минималистични jQuery плъзгачи за изображения, които съм срещал (1kb плъгин). ResponsiveSlides.jsе малък jQuery плъгин, който създава слайдшоу, използвайки елементи вътре в контейнер. Работи с широк обхватбраузъри, включително всички версии на IE - известната спирачка за прогрес, от IE6 и по-нови. Работата използва CSS3 преходи във връзка с javascript за надеждност. Просто оформление, използващо неподреден списък, персонализиране на преходи и времеви интервали, автоматични и ръчно управлениепревключване на слайдове, както и поддръжка на няколко слайдшоута наведнъж. Ето такова игриво „бебе“.

Камера

Camera е безплатна добавка JQuery за организиране на слайдшоута на страници на уебсайтове, лек плъзгач с много ефекти на преход, 100% адаптивно оформление и много прости настройки. Пасва перфектно на екраните на всякакви потребителски устройства (компютърни монитори, таблети, смартфони и мобилни телефони). Възможност за демонстриране на вградено видео. Автоматична смяна на слайдове и ръчно управление с помощта на бутони и блок с миниатюрни изображения. Почти пълна галерия от снимки в компактен дизайн.

bxSlider jQuery

Друг доста прост отзивчив плъзгач в jQuery. Можете да поставите всяко съдържание, видео, изображения, текст и други елементи на вашите слайдове. Разширена поддръжка сензорни екрани. Използване на CSS анимации за преход. Голям брой различни варианти на слайдшоута и компактни галерии с изображения. Автоматично и ръчно управление. Превключвайте слайдове с помощта на бутони и чрез избор на миниатюри. Малък размер изходен файл, много лесен за конфигуриране и изпълнение.

FlexSlider 2

FlexSlider 2 Актуализирана версияплъзгач със същото име, с подобрена скорост на реакция, минимизиране на скрипта и минимизиране на преформатиране/преначертаване. Плъгинът включва основен плъзгач, управление на слайд с миниатюри, вградени стрелки наляво-надясно и долна навигационна лента под формата на бутони. Възможност за показване на видео в слайдове (vimeo), гъвкави настройки (преходи, дизайн, времеви интервал), напълно адаптивно оформление.

Галерия

Добре познат и доста популярен отзивчив jQuery плъгин за създаване на висококачествени галерии с изображения и плъзгачи. Интерфейсът на плъзгача, благодарение на своя контролен панел, визуално прилича на познат видео плейър; плъгинът включва няколко различни теми за дизайн. Поддържа вградено видео и изображения с популярни услуги: Flickr, Vimeo, YouTube и др. Подробна документация за настройка и използване.

Боровинка

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

jQuery popeye 2.1

Много компактен слайдер за изображения на jQuery с елементи на Lightbox. Благодарение на вашите гъвкави размери, много лесно се вгражда във всеки контейнер, в единичен запис под формата на миниатюри, когато задържите курсора на мишката или щракнете върху тях, се активира лайтбокс с увеличена картина и контроли. Удобно е да поставите такъв плъзгач в страничните панели, за да представяте продукти или съобщения за новини. Перфектно решениеза сайтове с голямо количество информация.

Последователност

Безплатен отзивчив плъзгач с разширени CSS3 преходи. Минималистичен стил, 3 дизайнерски теми, Всеки кадър се плъзга хоризонтално, появявайки се в центъра, картината отива вляво, подписът вдясно, миниатюрите се дублират в долния десен ъгъл. Страниране на изгледи на продукти, които да се разглеждат във всеки кадър. Контролите също включват бутони за връщане назад и напред. Подкрепа от всички модерни браузъри.

Плъзнете

Много прост плъзгач на изображението както по отношение на функционалността, така и по отношение на настройките; сред настройките има промяна в скоростта на смяна на слайдове, активиране на ръчен режим (бутони за управление са активирани), непрекъснато слайдшоу. Този плъзгач има право да съществува и ме привлече само защото съществува; Не намерих нищо особено интересно в това развитие, може би не го търсех добре)))

Отзивчив плъзгач за изображение

Такъв красив, адаптивен слайдер на изображението от Владимир Кудинов, другари. Солиден, добре проектиран инструмент, доставен с ясни примерии подробни инструкции за създаване, инсталиране и използване. Адаптивен дизайн, хубави бутони и зелени стрелки, всичко е доста приятно и спокойно, без натиск.

FractionSlider

Безплатен JQuery слайдер плъгин с паралакс ефект за изображения и текстови слайдове. Анимациите на слайдове имат множество стойности на показване с пълен контрол във всяка настройка на времето и анимацията. Възможност за анимиране на няколко елемента на слайд наведнъж. Можете да инсталирате различни методианимации, избледняване на слайдове или преходи от определена посока. Автоматичен дисплей и ръчно управление с помощта на навигационни стрелки, които изскачат, когато задържите курсора на мишката върху изображението. 10 вида ефекти на слайд анимация и много повече...

Прегледът се оказа доста обширен, но недостатъчно информативен поради големия брой разгледани продукти. Всички подробности и подробни описания функционалностна този или онзи плъгин, можете да разберете директно на страниците на разработчиците. Мога само да се надявам, че съм улеснил някой да намери този много необходим инструмент за създаване на цветни плъзгачи с картинки на страниците на техните уебсайтове.

С цялото си уважение, Андрю

Позволете ми да започна, като кажа, че тази статия е написана, за да говори за това как да създадете плъзгач за превъртане на изображения за уеб страници. Тази статия по никакъв начин няма образователен характер, тя служи само като пример за това как нашият обект на разглеждане може да бъде приложен. Можете да използвате кода, предоставен в тази статия, като вид шаблон за подобни разработки, надявам се, че ще успея да предам на читателя същността на това, което съм написал достатъчно подробно и по достъпен начин.

И сега към точката, не толкова отдавна трябваше да инсталирам слайдер на един сайт, но след търсене в интернет за готови скриптове не намерих нищо полезно, т.к. някои не работеха както трябва, докато други изобщо не стартираха без грешки в конзолата. Използвайте jQuery - плъгиниЗа слайдер ми се стори твърде безинтересно, защото... Въпреки че това ще реши проблема, няма да разбера как работи този механизъм и използването на плъгин само за един плъзгач не е много оптимално. Освен това не ми се искаше да разбирам кривите скриптове, така че реших да напиша свой собствен скрипт за плъзгача, който сам ще маркирам според нуждите си.

Първо, трябва да вземем решение за логиката на самия плъзгач и след това да продължим към изпълнението.На този етап ясното разбиране на работата на този механизъм е много важно, защото без него не можем да напишем код, който работи точно както ние искам.

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


След това отстрани отвътре прозорец за изглед, вертикално в средата, ще има бутони назад и напред, когато щракнете върху тях, ние също ще променим позицията на нашия slidewrapperотносително прозорец за изглед, като по този начин предизвиква ефекта на превъртане през снимки. И накрая, последният обект ще бъдат нашите бутони за навигация, разположени в долната част прозорец за изглед.


Когато щракнем върху тях, просто ще погледнем серийния номер на този бутон и ще го преместим на слайда, от който се нуждаем, отново чрез преместване slidewrapper(смяната ще стане чрез смяна трансформиране на css свойства, чиято стойност ще се изчислява постоянно).

Мисля, че логиката на това как работи цялото това нещо трябва да е ясна след това, което казах по-горе, но ако все пак някъде възникнат недоразумения, тогава всичко ще стане по-ясно в кода по-долу, просто трябва малко търпение.

Сега да пишем! Първо, нека отворим нашия индексен файли напишете там маркировката, от която се нуждаем:

Както можете да видите, нищо сложно, блок-за-плъзгачслужи само като блок, в който ще бъде поставен нашият плъзгач, вътре в него вече е прозорец за изглед, който съдържа нашите slidewrapper, известен още като вложен списък, тук лиса слайдове и img- снимки вътре в тях. Моля, обърнете внимание на факта, че всички снимки трябва да са с еднакъв размер или поне пропорции, в противен случай плъзгачът ще изглежда крив, т.к. неговите размери пряко зависят от пропорциите на изображението.

Сега трябва да стилизираме цялото това нещо; обикновено стиловете не се коментират особено, но реших все пак да обърна внимание на това, за да няма недоразумения в бъдеще.

тяло ( margin: 0; padding: 0; ) #block-for-slider ( width: 800px; margin: 0 auto; margin-top: 100px; ) #viewport ( width: 100%; display: table; position: relative; overflow: скрит; -webkit-user-select: няма; -moz-user-select: няма; -ms-user-select: няма; -o-user-select: няма; user-select: няма; ) #slidewrapper ( позиция: относителна; ширина: calc(100% * 4); горе: 0; ляво: 0; поле: 0; подложка: 0; -webkit-transition: 1s; -o-transition: 1s; преход: 1s; -webkit -transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; conversion-timing-function: ease-in-out; ) #slidewrapper ul, #slidewrapper li ( марж : 0; padding: 0; ) #slidewrapper li (ширина: calc(100%/4); list-style: none; display: inline; float: left; ) .slide-img ( width: 100%; )

Да започнем с блок-за-плъзгач, това, повтарям, е нашият блок на страницата, който ще разпределим за плъзгача, неговата височина ще зависи от неговата ширина и от пропорциите на нашето изображение, т.к. прозорец за изгледзаема цялата ширина блок-за-плъзгач, после себе си пързалкаима същата ширина и съответно картината вътре в нея променя височината си в зависимост от ширината (пропорциите се запазват). Поставих този елемент на моята страница хоризонтално в средата, с отстъп 100px отгоре, което направи позицията му по-удобна за примера.

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


Следване css свойство - потребителски избор: няма, ви позволява да се отървете от синьото подчертаване отделни елементиплъзгач с множество кликвания върху бутони.

Да преминем към slidewrapper, защо позиция: роднина, но не абсолютен? Всичко е много просто, защото... ако изберем втория вариант, то със имота препълване на прозореца за изглед: скритоНа нас ще ни се стори абсолютно нищо, защото... себе си прозорец за изгледняма да се регулира на височина slidewrapper, поради което ще има височина:0. Защо ширината има значение и защо изобщо я задаваме? Факт е, че нашите слайдове ще имат ширина, равна на 100% от прозореца за изглед, а за да ги подредим в една линия, ни трябва място, където ще стоят, така че шир slidewrapperтрябва да са равни 100% ширина на прозореца за изглед, умножено по броя на слайдовете (в моя случай по 4). Относно преходИ преход-време-функция, след това тук 1sозначава, че промяната е промяна на позицията slidewrapperще се случи в рамките на 1 секунда и ние ще го наблюдаваме, и лекота на влизане и излизане– вид анимация, при която започва бавно, ускорява се до средата и след това отново се забавя; тук можете да зададете стойностите по свое усмотрение.

Следващият блок от свойства определя slidewrapperи неговите дъщерни елементи имат нулева подложка, без коментари тук.

След това стилизираме нашите слайдове, тяхната ширина трябва да е равна на ширината прозорец за изглед, но защото те са в slidewrapper, чиято ширина е равна на ширината на прозореца за изглед, умножена по броя на слайдовете, за да получите ширината прозорец за изгледотново имаме нужда от 100% от ширината slidewrapperразделете на броя на слайдовете (в моя случай отново на 4). След това ги превръщаме в вградени елементис помощ дисплей: вградени задайте потока наляво, като добавите свойството float:left. относно стил на списък: нямаМога да кажа, че го използвам за премахване на маркера по подразбиране от ли, в повечето случаи е един вид стандарт.

Co slide-imgТова е просто, изображението ще заеме цялата ширина пързалка, пързалкарегулирайте на височината си, slidewrapperрегулирайте на височина пързалка, и височината прозорец за изгледна свой ред ще вземе стойността на височината slidewrapper, така че височината на нашия плъзгач ще зависи от пропорциите на изображението и размера на блока, предвиден за плъзгача, за който вече писах по-горе.

Мисля, че на този етап разбрахме стиловете, нека засега направим просто слайдшоу без бутони и след като се уверим, че работи правилно, ще ги добавим и стилизираме.

Да отворим нашата js файл, който ще съдържа кода на слайдера, не забравяйте да се свържете jQuery, защото Ще пишем, използвайки тази рамка. Между другото, в момента на писане на тази статия, аз използвам версията jQuery 3.1.0. Самият файл със скрипта трябва да бъде включен в самия край на тага тяло, защото ще работим с DOM елементи, които първо трябва да бъдат инициализирани.

Засега трябва да декларираме няколко променливи, едната ще съхранява номера на слайда, който виждаме в определен моментвреме в прозорец за изглед, обадих й се slideNow, а вторият ще съхранява броя на същите тези слайдове, това slideCount.

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

Променлива slideNowнеобходимо е да се зададе начална стойност 1, т.к когато страницата се зареди, въз основа на нашето маркиране, ще видим първия слайд прозорец за изглед.

IN slideCountще поставим броя на децата slidewrapper, тук всичко е логично.
След това трябва да създадете функция, която ще отговаря за превключването на слайдовете отдясно наляво, нека я декларираме:

функция nextSlide() ( )

Ще го извикаме в основния блок на нашия код, до който ще стигнем по-късно, но засега ще кажем на нашата функция какво трябва да прави:

функция nextSlide() ( if (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * ( slideNow); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0) ) )", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )

Първо, проверяваме дали в момента сме на последния слайд от нашата емисия? За да направим това, ние вземаме броя на всички наши слайдове, използвайки $("#slidewrapper").children().lengthи го проверете с номера на нашия слайд, ако се окажат равни, това означава, че трябва да започнем да показваме емисията отново от слайд 1, което означава, че променяме трансформиране на свойството cssпри slidewrapperНа превеждам (0, 0), като по този начин го премества в първоначалната му позиция, така че първият слайд да се появи в нашето зрително поле, нека също не забравяме за –webkit и –msза адекватно показване на различни браузъри (вж. справка за css свойства). След това не забравяйте да актуализирате стойността на променливата slideNow, като й каза, че се вижда слайд номер 1: slideNow = 1;

Същото условие включва проверка дали номерът на слайда, който виждаме, е в рамките на броя на нашите слайдове, но ако по някакъв начин това не е изпълнено, тогава ще се върнем отново към 1-вия слайд.

Ако първото условие не е изпълнено, това означава, че в момента не сме нито на последния слайд, нито на някакъв несъществуващ, което означава, че трябва да превключим на следващия, ще направим това, като преместим slidewrapperналяво със стойност, равна на ширината прозорец за изглед, изместването отново ще се случи чрез познатото свойство превеждам, чиято стойност ще бъде равна "translate(" + translateWidth + "px, 0)", Където translateWidth– разстоянието, на което нашите slidewrapper. Между другото, нека декларираме тази променлива в началото на нашия код:

var translateWidth = 0;

След като преминем към следващия слайд, нека кажем на нашия слайд Сега, когато виждаме следващия слайд: slideNow++;

В този момент някои читатели може би се чудят защо не заменихме $("#viewport").width()към някаква променлива, например slideWidthвинаги да имаме под ръка ширината на нашия слайд? Отговорът е много прост, ако нашият сайт е адаптивен, тогава, съответно, блокът, разпределен за плъзгача, също е адаптивен, въз основа на това можем да разберем, че при преоразмеряване на ширината на прозореца без презареждане на страницата (например завъртане на телефона отстрани), ширината прозорец за изгледще се промени и съответно ширината на един слайд ще се промени. В този случай нашата slidewrapperще бъде изместен до стойността на ширината, която е била първоначално, което означава, че картините ще се показват на части или изобщо няма да се показват в прозорец за изглед. Като пишем в нашата функция $("#viewport").width()вместо slideWidthпринуждаваме го да изчислява ширината всеки път, когато сменяме слайдове прозорец за изглед, като по този начин гарантираме, че когато ширината на екрана се промени рязко, можем да превъртим до желания слайд.

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

var slideInterval = 2000;

Времето в js е посочено в милисекунди.

Сега нека напишем следната конструкция:

$(документ).готов(функция () ( setInterval(nextSlide, slideInterval); ));

Тук всичко не може да бъде по-просто, преминаваме през дизайна $(документ).готов(функция () ())Казваме, че следните действия трябва да бъдат извършени след като документът е напълно зареден. След това просто извикваме функцията nextSlideс интервал равен на slideInterval, използвайки вградената функция setInterval.

След всички действия, които извършихме по-горе, нашият плъзгач трябва да се върти перфектно, но ако нещо се обърка за вас, тогава проблемът може да е във версията jQuery, или в неправилна връзкавсякакви файлове. Също така не е необходимо да изключваме, че може да сте направили грешка някъде в кода, така че мога само да ви посъветвам да проверите отново всичко.


Междувременно, нека продължим, добавете към нашия плъзгач функция като спиране на превъртането при задържане на курсора, за това трябва да напишем в основния блок код (вътре в конструкцията $(document).ready(function () ()).това нещо:

$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

За да започнем да анализираме този код, трябва да знаем какво е switchInterval. Първо, това е променлива, която съхранява периодичното извикване на функцията nextSlide, просто казано, имаме този ред код: setInterval(nextSlide, slideInterval);, се превърна в това: switchInterval = setInterval(nextSlide, slideInterval);. След тези манипулации нашият основен блок код прие следната форма:

$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval); )); ));

Тук използвам събитие завъртане, което означава "при задържане", това събитие ми позволява да проследя момента, в който задържа курсора на мишката върху някакъв обект, в в такъв случайНа прозорец за изглед.

След като задържа курсора, изчиствам интервала, който посочвам в скоби (това е нашият switchInterval), след това, разделени със запетаи, пиша какво ще направя, когато преместя курсора назад, в този блок отново присвоявам на нашия switchIntervalпериодично извикване на функция nextSlide.

Сега, ако тестваме, можем да видим как нашият плъзгач реагира на зависване, спирайки превключването на слайда.

Сега е време да добавим бутони към нашия слайдер, нека започнем с бутоните за напред и назад.

Първо, нека ги маркираме:

Първоначално това маркиране може да е неразбираемо, но веднага ще кажа, че увих тези два бутона в един дивс класа предишен-следващ-btnsсамо за ваше удобство не е нужно да правите това, резултатът няма да се промени, сега ще добавим стилове към тях и всичко ще стане ясно:

#prev-btn, #next-btn (позиция: абсолютна; ширина: 50px; височина: 50px; цвят на фона: #fff; радиус на границата: 50%; горе: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover (курсор: показалец;) #prev-btn (ляво: 20px;) #next-btn (дясно: 20px;)

Първо позиционираме нашите бутони чрез позиция: абсолютна, като по този начин ще контролираме свободно позицията им в рамките на нашата прозорец за изглед, след което посочваме размерите на тези бутони и използваме граница-радиусНека закръглим ъглите, така че тези бутони да се превърнат в кръгове. Цветът им ще е бял, т.е #Ф ф ф, и тяхното разстояние от горния ръб прозорец за изгледще бъде равно на половината от височината на това прозорец за изгледминус половината от височината на самия бутон (в моя случай 25px), по този начин можем да ги позиционираме вертикално в центъра. След това ще посочим, че когато задържим курсора на мишката върху тях, курсорът ни ще се промени на показалеци накрая, нека кажем на нашите бутони поотделно, че трябва да бъдат отдалечени на 20 пиксела от краищата си, за да можем да ги видим по начин, който ни подхожда.

Отново можете да стилизирате елементите на страницата както искате, аз просто давам пример за стиловете, които реших да използвам.

След стилизиране нашият плъзгач трябва да изглежда така:


След това се връщаме към нашите js файл, където описваме работата на нашите бутони. Е, нека добавим още една функция, тя ще ни покаже предишния слайд:

функция prevSlide() ( if (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0 )", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = slideCount; ) else ( translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px , 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow--; ))

Нарича се prevSlide, той ще бъде извикан само когато щракнете върху предишна-btn. Първо проверяваме дали сме на 1-ви слайд или не, тук също проверяваме дали нашият slideNowизвън действителния обхват на нашите слайдове и, ако някое от условията се задейства, ще преминем към последния слайд, премествайки slidewrapperдо стойността, от която се нуждаем. Ще изчислим тази стойност по формулата: (ширина на един слайд) * (брой слайдове - 1), вземаме всичко това със знак минус, т.к. преместваме го наляво, оказва се, че прозорец за изгледсега ще ни покаже последния слайд. В края на този блок също трябва да кажем променливата slideNowче последният слайд вече е в нашето зрително поле.

Ако не сме на първия слайд, тогава трябва да се преместим 1 назад, за това отново променяме свойството трансформация за слайд обвивка. Формулата е: (ширина на един слайд) * (номер на текущия слайд - 2), отново вземаме всичко това със знак минус. Но защо -2, а не -1, трябва да преместим само 1 слайд назад? Факт е, че ако сме, да речем, на 2-ри слайд, тогава променливата хИмоти transform:translate(x,0)нашият slidewrapperвече е равен на ширината на един слайд, ако му кажем, че трябва да извадим 1 от номера на текущия слайд, отново ще получим такъв, с който вече сме се изместили slidewrapper, така че ще трябва да преместите същите тези ширини на 0 прозорец за изглед, което означава на slideNow - 2.

Сега просто трябва да добавим тези редове към основния блок код:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

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

Сега нека добавим бутони за навигация на слайдове и отново да се върнем към маркирането:

Както можете да видите, вътре прозорец за изгледпояви се вложен списък, нека му дадем идентификатор nav-btns, вътре в него ли– нашите бутони за навигация, ще им присвоим клас slide-nav-btn, но можем да завършим с маркирането, нека да преминем към стиловете:

#nav-btns (позиция: абсолютна; ширина: 100%; дъно: 20px; подложка: 0; поле: 0; подравняване на текст: център; ) .slide-nav-btn (позиция: относителна; дисплей: inline-block; list-style: none; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; margin: 3px; ) .slide-nav-btn:hover (курсор: показалец; )

Блок nav-btns, в който се намират нашите бутони, даваме имота позиция: абсолютна, за да не се разтяга прозорец за изгледвъв височина, защото при slidewrapperИмот позиция: роднина, задаваме ширината на 100%, така че използвайки подравняване на текст: центърцентрирайте бутоните хоризонтално спрямо прозорец за изглед, след което използва имота отдолуУведомяваме нашия блок, че трябва да е на 20px от долния ръб.

С бутоните правим същото като със слайдовете, но сега ги даваме дисплей: inline-block, защото при дисплей: вграденте не отговарят на ширинаИ височина, защото са в абсолютно позициониран блок. Нека ги направим бели и използваме това, което вече знаем граница-радиусНека им дадем формата на кръг. Когато задържим курсора на мишката върху тях, ще променим външния вид на нашия курсор за обичайния дисплей.

Сега да започваме jQuery - части:
Първо, нека декларираме променлива navBtnId, която ще съхранява индекса на бутона, който сме щракнали:

var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1; ) );

Ето ни, когато щракнете върху нашия slide-nav-btnизвикване на функция, която първо присвоява на променлива navBtnIdиндексът на кликнатия бутон, т.е. неговият сериен номер, тъй като обратното броене започва от нула, тогава ако щракнем върху втория бутон, тогава navBtnIdсе записва стойността 1. След това правим проверка, където добавяме единица към серийния номер на бутона, за да получим число, сякаш обратното броене не е започнало от 0, а от 1, сравняваме това число с номера на текущия слайд, ако съвпадат, тогава няма да предприемем никакви действия, никакви действия, защото необходимият слайд вече е вътре прозорец за изглед.

Ако слайдът, от който се нуждаем, не се вижда прозорец за изглед, след което изчисляваме разстоянието, на което трябва да се движим slidewrapperналяво, след което променете стойността трансформирайте css свойства за превод(същото разстояние в пиксели, 0). Вече сме правили това повече от веднъж, така че не трябва да има въпроси. Накрая отново запазваме стойността на текущия слайд в променлива slideNow, тази стойност може да се изчисли чрез добавяне на единица към индекса на щракнатия бутон.

Това е всичко, всъщност, ако нещо не е ясно, тогава ще оставя връзка към jsfiddle, където ще бъде предоставен целият код, написан в материала.

Благодаря за вниманието!

Тагове:

• jquery плъзгач
• css
• css3 анимация
• html

Добави тагове

Преди известно време започнах да уча jQuery. Мисля, че всеки знае, че това е името на най-популярната библиотека за разработване и създаване на скриптове в JavaScript. С негова помощ е много лесно да създадете ефектни и интерактивни елементисайт.

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

И така, какви характеристики на нашия jQuery слайдер (който нарекох HWSlider) могат да бъдат отбелязани?

• Лекота на използване и дизайн - исках да създам прост скрипт без звънци и свирки, така че не използвах CSS3 анимации и кодът се оказа много гъвкав и разбираем.
• Възможност за вмъкване както на изображения, така и на всеки HTML код в слайдове.
• Възможност за превъртане през слайдовете както в ред (напред - назад), така и за избор на всеки слайд (1,2,3,4...)
• Автоматично генерирани връзки (предишен - следващ и с номера на слайдове). Просто трябва да въведете необходимия брой divs и всичко останало ще се изчисли от само себе си. Е, може да се отбележи, че броят на слайдовете е неограничен.

Скриптът е съвместим с всички съвременни браузъри: IE, Opera, Firefox, Safari, Chrome (тъй като слайдерът не използва CSS3).

Да започнем с HTML маркиране. На правилното място html странициили трябва да се вмъкне шаблон.

Тук всичко е просто, както можете да видите, можете да вмъкнете толкова слайдове, колкото искате, като създадете нови div. В тях може да се вмъкне всичко. html код, например картина или блок от текст. Само не забравяйте да включите самата библиотека jQuery заедно с всички js скриптове. Ако не знаете как, вижте примера.

#slider-wrap( /* Обвивка за плъзгача и бутоните */ width:660px; ) #slider( /* Обвивка за плъзгача */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative; ) .slide( /* Слайд */ width:100%; height:100%; ) .sli-links( /* Бутони за промяна на слайдове */ margin-top:10px; text-align:center;) .sli-links. control-slide( margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no- repeat;) .sli -links .control-slide:hover( cursor:pointer; background-position:center center;) .sli-links .control-slide.active( background-position:center top;) #prewbutton, #nextbutton ( /* Връзка „ Следващ“ и „Предишен“ */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg .png) ляв център без повторение; непрозрачност:0,8; z-индекс:3; контур:няма !важно;) #prewbutton(left:10px;) #nextbutton(right:10px; background:url(arrowBg.png) right център без повторение; ) #prewbutton:hover, #nextbutton:hover(opacity:1;)

Нека го разгледаме по-подробно. Първо даваме основния блок с идентификатора "slider-wrap" необходимата ширина. Тъй като всички останали блокове са вмъкнати в него, височината не е необходимо да се посочва; тя ще зависи от това какво има вътре. След това трябва да зададем размерите на контейнера, в който ще бъдат разположени слайдовете. Това е #плъзгач. Нека му дадем ширина и височина, както и, например, граница от 10 пиксела. Тук ширината е 640px, което е по-малко от ширината на родителя, тъй като добавяме граници от 10px отдясно и отляво. Ширината на самите слайдове (.slide) също зависи от ширината на този div.

И последното нещо: трябва да зададем позиция: относителна за контейнера за слайдове, тъй като слайдовете вътре са с абсолютно позициониране. За самите слайдове в CSS се задават само ширината и височината. Останалите свойства се задават в скрипта jQuery.

Selector.sli-links е блок, който ще съдържа бутони за придвижване до желания слайд. Тези бутони са прости елементи на формата номер, които ще бъдат вмъкнати в необходимото количество автоматично, заедно с техните parent.sli-линкове. За бутони задаваме красива гледка, а именно правим всеки бутон квадратен, подравняваме ги всички в центъра и също така, благодарение на overflow: hidden и text-indent:-9999px, премахваме текста, оставяйки само фоновите икони, които също се променят, когато задържите курсора на мишката върху този елемент с курсора. За удобство използвах спрайтове, което намали броя на изображенията.

След това се проектира активният бутон. Просто променяме позицията на фона. След това ще преработим връзките, за да преминем към следващия и предишния слайд. Можете да им дадете всякакъв дизайн, точно като копчета. Тези връзки се вмъкват автоматично в #slider. Но за да се видят ги помолих абсолютно позициониранеи горен слой (z-индекс:3), така че да се показват над слайдовете. Мисля, че с CSS всичко е ясно и просто тук: можете да промените почти всички свойства, за да проектирате плъзгача така, както ви е необходимо.

Нека сега да разгледаме самия сценарий:

Var hwSlideSpeed ​​​​= 700; var hwTimeOut = 3000; var hwNeedLinks = вярно; $(document).ready(function(e) ( $(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(arrow)( clearTimeout(slideTime); $ (".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if(arrow == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = стрелка; ) $(".slide").eq( slideNum).fadeIn(hwSlideSpeed, ротатор); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active") ; ) if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $ ( "#prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += " " + индекс + ""; }); $("

").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pause = false; var rotator = function())( if(!pause)(slideTime = setTimeout(function())( animSlide(" next")), hwTimeOut);) ) $("#slider-wrap").hover(function())(clearTimeout(slideTime); pause = true;), function())(pause = false; ротатор(); )); ротатор(); ));

Първо, настройките се записват в променливи: hwSlideSpeed ​​​​- скоростта на завъртане на слайдовете, hwTimeOut - времето, след което се случва автоматична промянаслайд, hwNeedLinks - контролира връзките "Следваща" и "Предишна" - ако стойността на тази променлива е вярна, тогава тези връзки ще бъдат показани, а ако е фалшива, тогава те няма да бъдат показани (както на главната страница на моя блог ).

След това инсталираме необходимото CSS свойстваза слайдове с помощта на метода .css(). Подреждаме блокове със слайдове един върху друг, използвайки абсолютно позициониране, след което ги скриваме всички.hide() и след това показваме само първия. Променливата slideNum е номерът на активния слайд, т.е. броячът.

Основната логика на нашия слайдер jQuery е функцията animSlide. Изисква един параметър. Ако предадем низовете „next“ или „prew“ в него, той ще работи условни изявленияи следващият или предишният слайд ще се покаже съответно. Ако изпратим число като стойност, тогава това число ще стане активен слайд и ще се покаже.

Така че тази функция скрива текущия div, изчислява нов и го показва.

Имайте предвид, че методът .fadeIn(), който прави активния слайд видим, получава втори аргумент. Това е така наречената функция обратно повикване. Изпълнява се, когато слайдът се появи напълно. В този случай това се прави, за да се осигури автоматично превъртане на слайдовете. Функцията ротатор, дефинирана по-долу, извиква отново функцията animSlide, за да премине към следващия слайд в желания интервал от време: ще получим затваряне, което гарантира постоянно превъртане.

Всичко работи добре, но трябва да спрем автоматизацията, ако потребителят премести курсора към плъзгача или натисне бутоните. За тази цел е създадена променливата пауза. Ако стойността му е положителна - вярно, тогава автоматично превключваненяма да бъде. Използвайки метода .hover(), ние указваме: изчистете таймера, ако работи - clearTimeout(slideTime), и задайте pause = true. И след като преместите курсора, изключете паузата и стартирайте затварянето на rotator().

Освен това трябва да създадем нови елементи на страницата и да ги поставим на правилното място. Използвайки цикъла each() за всеки слайд (div с клас .slide), ще създадем span елемент, вътре в който има число - номерът на слайда. Този номер се използва във функцията за анимация за преминаване към слайда с този номер. Нека увием всичко в div с необходимите класове и накрая ще получим следното маркиране:

Изглежда, защо създаваме маркиране вътре в скрипта, а не в HTML кода? Факт е, че например, ако потребителят има деактивирани скриптове, той няма да види елементи, които няма да работят, и това няма да го обърка. Освен това кодът е опростен, което е добре за SEO.

В резултат на това оформлението на плъзгача ще изглежда по следния начин (използвах изображения като слайдове и инсталирах 5 от тях):

По-долу можете да видите как работи нашият слайдер jQuery на демонстрационната страница и да изтеглите всички необходими източници.

И накрая, няколко точки относно интегрирането на този слайдер с Drupal. Можете да добавите този код към шаблонен файл, например в page.tpl.php, и да прикачите скрипта като отделни js файлове към темата. Jquery в Drupal е активиран по подразбиране, но работи в режим на съвместимост (). Има два варианта за подобрение. Или обвийте целия js код:

(функция ($) ( // Целият ви код... ))(jQuery);

или заменете символите $ в скрипта с jQuery. Като този:

JQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow)( // etc .

Примерът вече е имплементирал първия метод.

Благодаря за четенето! Оставете коментари, елате отново. Можете също така да се абонирате за RSS, за да получавате първи актуализации на блога!

Добавено:Това не е всичко Прочети. Там ще добавим нови функции към този скрипт.