circleCarousel是一款jQuery圆形轮播图插件。该jQuery圆形轮播图插件能够生成一组围绕中心旋转的圆形轮播图,点击图片时会有炫酷的旋转动画。
使用方法
在页面中引入jquery、circle.js和circle.css文件。
<script src="path/to/jquery.min.js"></script> <script src="path/to/circle.js"></script> <link rel="stylesheet" href="css/circle.css">
HTML结构
该jQuery圆形轮播图的HTML结构如下。
<div class="holderCircle"> <div class="dotCircle"> <span class="itemDot active itemDot1" data-tab="1"> Item 1 <span class="forActive"></span> </span> <span class="itemDot itemDot2" data-tab="2"> Item 2 <span class="forActive"></span> </span> <span class="itemDot itemDot3" data-tab="3"> Item 3 <span class="forActive"></span> </span> <span class="itemDot itemDot4" data-tab="4"> Item 4 <span class="forActive"></span> </span> <span class="itemDot itemDot5" data-tab="5"> Item 5 <span class="forActive"></span> </span> ... </div> <div class="contentCircle"> <div class="CirItem active CirItem1"> TEXT SAMPLE FOR ITEM 1 </div> <div class="CirItem CirItem2"> TEXT SAMPLE FOR ITEM 2 </div> <div class="CirItem CirItem3"> TEXT SAMPLE FOR ITEM 3 </div> <div class="CirItem CirItem4"> TEXT SAMPLE FOR ITEM 4 </div> <div class="CirItem CirItem5"> TEXT SAMPLE FOR ITEM 5 </div> </div> </div>
该jQuery圆形轮播图插件的github地址为:https://github.com/nasirfarhadi92/circleCarousel