Circle Carousel - это круглый карусельный плагин jQuery. Круговфя карусель jQuery может генерировать набор круговых каруселей вокруг центра, и при нажатии на изображение будут крутые вращающиеся анимации.
Как использоватьПредставьте файлы jquery, circle.js и circle.css на странице. - <font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><script src = "путь / to / jquery.min.js"> </ script></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- <script src = "путь / to / circle.js"> </ script></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- <link rel = "stylesheet" href = "css / circle.css"></font></font><font></font>
Скопировать код Структура HTMLСтруктура HTML круговая карусель jQuery заключается в следующем. - <font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><div class = "holderCircle"></font></font><font></font>
- <font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- <div class = "dotCircle"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- <span class = "itemDot active itemDot1" data-tab = "1"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- Пункт 1</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- <span class = "forActive"> </ span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- </ Span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- <span class = "itemDot itemDot2" data-tab = "2"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- Пункт 2</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- <span class = "forActive"> </ span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- </ Span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- <span class = "itemDot itemDot3" data-tab = "3"></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- Пункт 3</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- <span class = "forActive"> </ span></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
- </ Span></font></font><font></font>
- <span class="itemDot itemDot4" data-tab="4"><font></font>
- Item 4<font></font>
- <span class="forActive"></span><font></font>
- </span><font></font>
- <span class="itemDot itemDot5" data-tab="5"><font></font>
- Item 5<font></font>
- <span class="forActive"></span><font></font>
- </span><font></font>
- ...<font></font>
- </div><font></font>
- <font></font>
- <div class="contentCircle"><font></font>
- <font></font>
- <div class="CirItem active CirItem1"><font></font>
- TEXT SAMPLE FOR ITEM 1<font></font>
- </div><font></font>
- <div class="CirItem CirItem2"><font></font>
- TEXT SAMPLE FOR ITEM 2<font></font>
- </div><font></font>
- <div class="CirItem CirItem3"><font></font>
- TEXT SAMPLE FOR ITEM 3<font></font>
- </div><font></font>
- <div class="CirItem CirItem4"><font></font>
- TEXT SAMPLE FOR ITEM 4<font></font>
- </div><font></font>
- <div class="CirItem CirItem5"><font></font>
- TEXT SAMPLE FOR ITEM 5<font></font>
- </div><font></font>
- </div><font></font>
- <font></font>
- </div><font></font>
Скопировать код
|