Най-простият елементи на кръгов карусел JQuery

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

Сега много популярна хоризонтални и вертикални плъзгачи и въртележка елементи. Има голям брой готови библиотеки за изпълнението на кръстовища с кръгово движение. Но не толкова отдавна, аз попаднах на един сайт, където елементите са подредени и се обърнаха. За създаване на кръгова въртележка там са готови 3D въртележки библиотека, но те не позволяват да се реализира точно това, което исках, и контрола върху елементите е бил почти нулев, че е трудно да се определи функционалната "от само себе си".

В резултат на това аз реших да независимо разследване и да направи подобна въртележка елементи. Демонстрация въртележка Можете да намерите връзка в края на статията.

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

Как работи:

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

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

На следващо място, направете следното маркиране:

Тук искам да се съсредоточи върху блока

.

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

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

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

Също така, ние представяме навигационна единица

- стрелките преминете напред и назад, те могат да бъдат отстранени, ако не ще бъдат необходими.

И съответно блока

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

Структурата е готова. Сега трябва да се направи на цялото съдържание:

Тук, обърнете внимание на дизайна на клас .circle-контейнера, в него ние просто укажете изображението, което ще бъде нашата база. Изображение желателно да бъде равна на или по-голям от размера на устройството карусел. Размерът на блока и да поискаме клас .circle-въртележка .container .wraper, размер ми е 1000х1000 пиксела (въртележка имаме кръг, така че устройството трябва да бъде равна на ширина и височина).

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

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

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

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

Тук имаме функции 4 и 3 за обработка на неотложните (натискане на бутона "Назад", "Напред" и кликнете върху самия обект):
appendContent (ELEM) - функция, която получава от заглавието, описание и връзка елемент и разположен в централния блок;
rotateElem (ELEM) - функция, която ще се превърне цялата въртележка на елемента, който е продуциран от един клик;
rotatePrev (ELEM) - функция, която ще се превърне въртележката обратно от един елемент, когато щракнете върху бутона "назад";
rotateNext (ELEM) - функция, която ще се превърне въртележката напред един елемент, когато щракнете върху бутона "Напред".

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

И не по-малко важна подробност - не забравяйте да се свържете на JQuery библиотеката.