Проста въртележка на jQuery. Проста въртележка на jQuery Проста въртележка на jquery с инструкции

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

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

timeList- скорост на превключване на плъзгача

TimeView- време за шоу

РадиоНо- бутони под плъзгача за бърза навигация. По подразбиране е вярно, ако използвате false, бутоните ще изчезнат.

Сега нека започнем! Нека създадем и отворим файл index.htm

В представения код, както виждаме, няма нищо сложно, плъзгаща се обвивкаопределя общата позиция и подравнява плъзгача към средата на екрана. Параметър active-slideзадава размера и височината на картината според нейната дължина. И плъзгачпоказва само активната картина.

Сега нека създадем и отворим файла style.cssи добавете маркировката, от която се нуждаем там:

@import url ("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body (color: # 4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0;) # slider-wrap (max-width: 800px; margin: 0 auto; margin-top: 80px;) # active-slide (width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms- потребителски избор: няма; ; подложка: 0; -webkit-преход: 1s; -o-преход: 1s; преход: 1s; -webkit-преход-синхронизиране-функция: лекота-в-изход; -o-преход-синхронизация-функция: лекота-в -out; функция за преход-синхронизация: лекота на излизане;). слайд (ширина: изчисляване (100% / 4); стил на списък: няма; дисплей: вграден; плаващ: наляво;). слайд img (ширина: 100%;) .Radio-But (margin-top: 10px; text-align: center;) .Radio-But .ctrl-select (margin: 2px; display: inline-block; width: 16px; height: 16px; overflow : hidden; text -indent: -9999px; background: url (radioBg.p ng) централно дъно без повторение; Радио-Но. : блок; ширина: 40px; височина: 100%; позиция: абсолютна; отгоре: 0; преливане: скрито; текст-отстъп: -999px; фон: url ("arrowBg.png") ляв център без повторение; непрозрачност: 0,5 ; z-index: 3; outline: none! important;) #prewbutton (вляво: 10px;) #nextbutton (вдясно: 10px; фон: url (arrowBg.png) вдясно в центъра без повторение;) #prewbutton: hover, # nextbutton: hover (непрозрачност: 1;)

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

В свойството на стила #плъзгач (ширина: изчислено (100% * 4);)и .slide (ширина: изчислено (100% / 4);)задайте броя на снимките във вашия плъзгач. В нашия пример има 4 от тях.

Ако стрелките напред / назад пречат на видимостта на плъзгача ви, можете да ги направите невидими и те ще се появят при задържане на курсора на мишката. За да направите това, в параметрите prewButи nextBut, задайте свойството opacity на 0.

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

$ (document) .ready (function () (var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $ ("# slider .slide"). дължина; var animSlide = function (arrow) (clearTimeout (slideTime); if (arrow == "next") (if (slideNum == slideCount) (slideNum = 1;) else (slideNum ++) translateWidth = - $ ("# active -slide ") .width () * (slideNum - 1); $ ("# slider "). css ((" transform ":" translate (" + translateWidth +" px, 0) "));) else if (arrow = = "prew") (if (slideNum == 1) (slideNum = slideCount;) else (slideNum- = 1) translateWidth = - $ (" # active -slide"). width () * (slideNum - 1); $ ("#slider"). css (("transform": "translate (" + translateWidth + "px, 0)"));) else (slideNum = arrow; translateWidth = - $ (" # active -slide"). width () * (slideNum -1); $ ("# slider"). css (("transform": "translate (" + translateWidth + "px, 0)"));) $ (". ctrl -select. active ") .removeClass (" active "); $ (". ctrl -select "). eq (slideNum - 1) .addClass (" active ");) if (RadioBut) (var $ linkArrow = $ ("<>") .prependTo (" # active-slide "); $ (" # nextbutton "). щракнете върху (function () (animSlide (" next "); return false;)) $ (" # prewbutton "). click (function () (animSlide ("prew"); return false;))) var adderSpan = ""; $ (". slide"). всеки (функция (индекс) (adderSpan + = " " + индекс +""; }); $("

") .appendTo (" # slider-wrap "); $ (". ctrl-select: first "). addClass (" active "); $ (". ctrl-select "). click (function () (var goToNum = parseFloat ($ (this) .text ()); animSlide (goToNum + 1);)); var pause = false; var rotator = function () (if (! pause) (slideTime = setTimeout (function () (animSlide ("next")), TimeView);)) $ ("# slider-wrap"). hover (function () (clearTimeout (slideTime); pause = true;), function () (pause = false; rotator () ;)); var click = false; var prevX; $ (". slide"). mousedown (function (e) (click = true; prevX = e.clientX;)); $ (". slide"). mouseup ( функция () (щракване = невярно;)); $ (документ) .mouseup (функция () (щракване = невярно;)); $ (". слайд"). ) (ако (e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) (animSlide ("prew"); clearTimeout (slideTime);) щракване = невярно; ))); $ (". слайд"). hover (). css ("курсор", "показалец"); ротатор (); ));

Функция animSlideприема три вида стойности: next, prew, числова стойност. Следващият параметър превключва следващия слайд, prew връща предишния, а числовата стойност определено е посоченият слайд, избран чрез радио бутоните под слайда.

В представения плъзгач бяха използвани снимки от уеб ресурса https://pixabay.com/.

Да, темата е доста отсечена. Но все пак намирането на това, от което наистина се нуждаете, често е трудно. Всички предлагат изключително сложни скриптове, с много ненужни функции. И обикновено това са вече компресирани плъгини.

Затова ще предложа моята алтернативна версия на много проста въртележка jQuery.

Може да се използва като въртележка с изображения, както и въртележка с новини или друго съдържание =)

Единствените малки камбани и свирки, които си позволих, бяха сянката на блока с въртележка.

UPD: 07/06/2014

Ще изглежда така:
DEMO Изтегляне

Структурата ще изглежда така:

Нека опишем стиловете:

Въртележка (макс. Ширина: 1080px; / * ширина на целия блок * / марж: 50px автоматично; ширина: 100%;). Въртележка-обвивка (поле: 10px 30px; / * подложка за стрелки * / overflow: hidden; / * скриване на съдържание извън основната област * / позиция: относителна;). елементи от въртележка (ширина: 10000 пиксела; / * задаване на по-голяма ширина за набора от елементи * / позиция: относителна; / * позициониране на полето спрямо основната въртележка area * /). carousel -block (float: left; / * подредете всички елементи на въртележка в ред * / width: 250px; / * задайте ширината на всеки елемент * / padding: 10px 10px 10px 0px; / * празнини така че елементите да не се сливат* /) .carousel -block img (display: block;) / *********** BUTTONS *********** / .carousel -button -left a, .carousel-button-right a (width: 25px; height: 36px; position: relative; top: 80px; cursor: pointer; text-decoration: none;) .carousel-button-left a (float: left ; фон: url (../ images / carousel- left.png);) .carousel-button-right a (float: дясно; фон: url (../ images / carousel-right.png); ) / *********** SHADOW *********** / .shadow (box-shadow: 0px 0px 10px rgba (0, 0, 0, 0.6);)

И накрая, как трябва да работи:

// Дръжте стрелката надясно щракнете върху $ (document) .on ("click", ".carousel-button-right", function () (var carusel = $ (this) .parents (". Carousel"); right_carusel (carusel) ; return false;)); // Щракнете със стрелка наляво щракнете върху $ (document) .on ("click", ". Carousel-button-left", function () (var carusel = $ (this) .parents (". Carousel"); left_carusel (carusel) ; return false;)); функция left_carusel (carusel) (var block_width = $ (carusel) .find (". carousel-block"). externalWidth (); $ (carusel) .find (". carousel-items .carousel-block"). eq (- 1) .clone (). PrependTo ($ (carusel) .find (". Carousel-items")); $ (carusel) .find (". Carousel-items"). Css (("left": "-" + block_width + "px")); $ (carusel) .find (". carousel-items .carousel-block"). eq (-1) .remove (); $ (carusel) .find (". carousel-items ") .animate ((вляво:" 0px "), 200);) функция right_carusel (carusel) (var block_width = $ (carusel) .find (". carousel-block "). externalWidth (); $ (carusel). find (".carousel-items"). animate ((вляво: "-" + block_width + "px"), 200, function () ($ (carusel) .find (". carousel-items .carousel-block") . eq (0) .clone (). appendTo ($ (carusel) .find (". carousel-items")); $ (carusel) .find (". carousel-items .carousel-block"). eq (0 ) .remove (); $ (carusel) .find (". carousel-items"). css (("left": "0px"));));) $ (function () (// Декомментирайте реда по-долу за да активирате автоматичното превъртане на въртележката auto_right (". carousel: first");)) // Automa функция за превъртане auto_right (carusel) (setInterval (function () (if (! $ (carusel) .is (". hover")) right_carusel (carusel); ), 3000)) // Преместване на курсора над въртележката $ (document) .on ("mouseenter", ".carousel", function () ($ (this) .addClass ("hover"))) // Премахване на курсор от въртележката $ (document) .on ("mouseleave", ".carousel", function () ($ (this) .removeClass ("hover")))

Съответно сянката може да бъде премахната. И за да го използвате, просто трябва да замените размера на основния блок и вложените блокове за „превъртане“ в css. Също така е много лесно да завъртите този процес, така че да се превърта автоматично (в този случай просто декомментирайте повикването към функцията auto_right). Тоест, можете да направите всичко от тази проста галерия, която е необходима в рамките на задачата!

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

Сова въртележка- плъгин с jQuery с докосване, който ви позволява да създадете отзивчив (отзивчив) плъзгач (въртележка).
Това е много лесен за използване, прост и отзивчив плъгин за създаване на плъзгачи, въртележки и т.н.
В тази статия ще се опитам да обясня и да ви покажа как работи.

Инсталиране на приставката Owl Carousel
Първо, трябва да изтеглим архива с приставката

По -долу ще покажа пример за инсталиране на приставка в шаблона на DataLife Engine.

След като изтеглим архива, отворете го и разпространете файловете, както следва:
Файл owl.carousel.cssи owl.transitions.css поставете в папката стилтака или css.
Файл owl.carousel.js поставете в папката js

Сега трябва да свържем тези файлове, за да работят в нашия шаблон.
Отваряне на файла main.tplа преди реда въведете следните редове:
Папка cssпроменете на този, в който имате cssстилове!
След това в самото дъно преди реда въвеждаме следния ред:
Така че това е всичко! Приключихме с инсталацията.

Сега трябва да вмъкнем и конфигурираме самия плъзгач.
Ще покажа с пример topnewsтези ще показва популярни новини чрез нашата сова въртележка.

Страницата с документация описва всички опции, демонстрации и как да използвате нашата приставка Owl Carousel.
Следвайте връзката и изберете всеки плъзгач, който харесвате.
За нашите topnewsИзбрах първия с името Изображения.В раздела javascript копирайте тези редове:
$ (document) .ready (function () ($ ("# owl-demo"). owlCarousel ((autoPlay: 3000, items: 4, itemsDesktop :, itemsDesktopSmall :));));и ги вмъкнете във файла main.tplпреди реда

След това в раздела CSS копирайте редовете:
# owl-demo .item (margin: 3px;) # owl-demo .item img (display: block; width: 100%; height: auto;) и ги включете във всеки cssфайл или файл main.tplпреди реда но след реда !
Сега ще анализираме нашия HTML код и ще го свържем topnews.Във файла main.tplпоставете етикета на правилното място (topnews)който от своя страна показва списък с популярни новини, чийто вид може да бъде персонализиран във файла topenews.tpl,повече за това по -долу .
Нашият маркиран код трябва да изглежда така:

Е, сега остава да конфигурираме самата новина.
Отваряне на файла Topnews.tplи в самото начало влизаме:

Ако използвате един от моите шаблони с Bootstrap, тогава като опция можете да използвате следните редове във файла topnews.tpl:

Новините ще се показват както следва

Този плъгин може да се използва почти навсякъде, както и да се използва етикетът (персонализирана категория)
Той може да замени и стандартната DLE галерия, ще публикувам отделна статия за това. Използвайте го за здраве;)

Поздрави администратор. Изтегли Внимание: Лимитът за изтегляне е достигнат. Ела утре =)

В интернет има много страхотни приставки за създаване на въртележки и плъзгачи на jQuery. Те ви позволяват да внедрите динамично превъртане с допълнителни ефекти.

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

Можете също да зададете свои собствени настройки и CSS стилове. Днешната статия има за цел да ви запознае с отзивчивите плъгини на jQuery за създаване на въртележки и плъзгачи.

Разсейващо - приставка jQuery за създаване на плъзгач за съдържание на цял екран със сензорен екран

Отзивчив плъзгач за въртене на съдържание на цял екран jQuery с поддръжка на сензорен екран. Плъгинът се разпространява под GNU GENERAL PUBLIC LICENSE v3:

Neoslide: проста и разширяема приставка за въртележка на jQuery

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

Hslider: плъгин за галерия с отзивчиви изображения на цяла страница

Друга приставка за показване на изображения с помощта на отзивчив jQuery въртележка с контроли и персонализирани времена на престой:

Carousel 3D: плъгин за въртележка jQuery с 3D ефекти на въртене

Елегантен плъзгач: Отзивчив jQuery на цял екран въртележка

Миниатюрна и атрактивна въртележка jQuery за показване на съдържание и изображения с различни видове навигация ( SVG стрелки с миниатюри, странични елементи или раздели):

PaW Carousel: отзивчив карусел с jQuery

PaW Carousel (v2) е миниатюрна приставка за създаване на отзивчиви, прости jQuery въртележки с изход на миниатюри:

Carousel Sharer: въртележка jQuery за социално споделяне

Carousel Sharer е плъгин за jQuery, който ви позволява да показвате няколко продукта едновременно и позволява на посетителите да споделят вашите продукти във Facebook, Twitter, Google+ и Pinterest:

Просто въртележка: Минималистична отзивчива въртележка с изображения

Simply Carousel е миниатюрна и бърза плъгина jQuery, която ви позволява да създавате гъвкави отзивчиви плъзгачи и въртележки за изображения:

Слайдове: Отзивчива въртележка и слайдшоу jQuery с поддръжка на докосване

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

Въртележка за съдържание на JQuery

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

Slick: отзивчива и гъвкава въртележка на jQuery

Slick е свежа приставка за създаване на персонализирани, отзивчиви и оптимизирани за мобилни устройства jQuery въртележки и плъзгачи, които могат да работят с всеки HTML елемент:

bxSlider: jQuery плъзгач за HTML съдържание

bxSlider е един от най -добрите плъзгачи за съдържание на jQuery, налични днес. Този плъгин е идеален за организиране на слайдшоута:

CarouFredSel: гъвкава и мощна приставка за въртележка на jQuery

jQuery.carouFredSel е плъгин, който превръща всеки HTML елемент в въртележка за съдържание. В него можете да превъртате един или повече елементи едновременно, както хоризонтално, така и вертикално. Можете също да включите автоматичното пускане и да превъртите превъртането в безкрайно:

Въртележка с циклично съдържание на JQuery

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

Облачна въртележка: 3D въртележка в Javascript

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

Elastislide: отзивчив jQuery въртележка

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

jCarousel Lite

С тази приставка ще можете да разглеждате изображения или HTML елементи като плъзгач. Тежи само 2Kb, но ви позволява да използвате вашите собствени настройки:

3D въртележка

Създайте въртележка 3D jQuery от изображения с ефект на падаща сянка и анимация, която реагира на позицията на курсора:

Приставка за въртележка JQuery

Настройките на приставката ви позволяват да определите колко елемента ще се показват в въртележката, след което приставката я адаптира към желаната ширина:

Въртящ се плъзгач на изображението на JQuery

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

Въртележка с функции на JQuery

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

Безкрайна въртележка на jQuery

Това е плъгин jQuery, който ви позволява да показвате неограничен брой изображения и видеоклипове в въртележка. За разлика от други въртележки, Infinite Carousel показва елементи в безкраен цикъл без нужда от навигация:

Приставка за течна въртележка jQuery

Liquid Carousel е плъгин за създаване на флуидни дизайни. Всеки път, когато контейнерът с въртяща се лента на jQuery преоразмерява, броят на показаните елементи се коригира към новата ширина:

Jquery MS въртележка

Направете въртележка в чист JS, от нулата и себе си? Защо да преоткриваме колелото, когато има готови решения хлъзгав / бухалплъзгачи? Има поне две причини за това:

• за образователни цели
• за изпълнение на тестови задачи

При кандидатстване за работа, дори за свободно място Htmlдизайнер на оформление, ще бъдете помолени не само да изложите въртележката, но и да я приложите в действие Js, без да използвате библиотеки на трети страни.

Пример с въртележка

Какво прави JavaScript с елементи?

Променя свойствата на елементите, като използва методи, когато възникнат събития. Три кита, за които да се хванеш JavaScript:

• Имоти
• методи
• разработки

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

HTML маркировка за въртележка

Нека създадем контейнер за снимки, вмъкнем самите снимки и два бутона - Напред / обратно.

CSS стилове

#gallery (
ширина: 640px;
марж: 20px автоматично;
подравняване на текст: център;
}

#gallery .photos img (
ширина: 100%;
дисплей: няма;
}

#gallery .photos img: първо дете (
дисплей: блок;
}

Бутони (
margin-top: 20px;
}

Логика на въртележка

Как изобщо да пиша Jsкод, когато не разбирате логиката на случващото се. Чрез натискане на бутона Напред, текущата картина изчезва и на нейно място се появява нова. В зрителното поле винаги има една снимка, но къде са останалите? А останалите, скрихме се, поискахме всички снимки дисплей: нямаоставяйки само първата, питайки я дисплей: блок, чрез псевдокласа първо дете.

Как да се уверите, че всеки път, когато щракнете върху бутон Напред, първата картина изчезна, а втората се появи и вместо втората, третата. Задължително, превключете свойство дисплей, между нито един / блок, когато кликнете върху бутона.

JS код

Избор на елементи

Вземете бутоните Напред / обратночрез селектор, използващ метода querySelectorи ги поставете в променливи btn_prev / btn_next.

Нека btn_prev = document.querySelector ("# галерия .buttons .prev");
нека btn_next = document.querySelector ("# галерия. бутони. следваща");

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

querySelectopAll- получава масив от елементи, тоест всички снимки.

Нека изображения = document.querySelectorAll ("# галерия .photos img");

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

Нека i = 0; // номер на текущата картина на екрана

Позоваваме се на текущата картина и я променяме в стилове, свойство дисплей.

Изображения [i] .style.display = "няма"; // скриване на текущата картина

Сега на екрана няма нито една картина. Как се появява следната картина там? Знаем, че номерът на следващата картина винаги ще бъде по -голям от номера на предишната, с единица.

I ++; // увеличавам променливата i с едно

изображения.дължина- това е броят на снимките, които могат да се променят, така че няма нужда да посочвате, че имаме 3 снимки, браузърът вече го знае. Увеличаваме брояча i, всеки път по един, докато се появи последната снимка, а след това насила принуждаваме въртележката да се върне отново към първата снимка. Това се нарича цикъл.

Предписваме условието, че когато броячът i, става повече от броя на съществуващите снимки, тогава ще има връщане към текущата картина, под номер 0.

Ако (i> = images.length) (
i = 0; // променливата i е равна на 0
}

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

Btn_prev.onclick = function () (
images [i] .style.display = "няма";
i = i - 1;
ако аз< 0){
i = изображения.дължина - 1;
}
images [i] .style.display = "блок";
}

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

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