jcircle.js是一款响应式圆形js轮播图插件。该轮播图插件能够将图片或文字以圆形轮播图的方式进行展示。并且该轮播图以响应式设计，可以自动进行圆形轮播。
使用方法
在页面中引入jCircle.css和jCircle.min.js文件
<link href="jCircle.css" rel="stylesheet"><script src="jCircle.min.js"></script>
HTML结构
一个圆形轮播图的基本HTML结构如下：
<div id="circles-container"> <div id="main-circle-content"></div> <div id="circle"> <div class="min-circle" data-inside="min-circle"> <a href="imgs/1.jpg"> <img src="imgs/thumb_1.jpg" alt=""> </a> <div class="content-text">Caption 1</div> </div> <div class="min-circle" data-inside="min-circle"> <a href="imgs/2.jpg"> <img src="imgs/thumb_2.jpg" alt=""> </a> <div class="content-text">Caption 2</div> </div> <div class="min-circle" data-inside="min-circle"> <a href="imgs/3.jpg"> <img src="imgs/thumb_3.jpg" alt=""> </a> <div class="content-text">Caption 3</div> </div> ... </div></div>
初始化插件
在页面DOM元素加载完毕之后，通过下面的方法来创建jCircle示例对象，并初始化该圆形轮播图插件。
var circle= new jCircle({ 'container': 'circles-container', 'circle': 'circle', 'mainContent':'main-circle-content', 'animateCircles':true, 'speed':3, 'mainViewStyle':'normal', 'minCirclesEffectOver':'pulse', 'contentType':'images', 'stopOnOverMain':false, 'mainContentOverAction':'normal'});circle.create(); 配置参数
该响应式圆形js轮播图插件的可用配置参数如下：
var circle= new jCircle({ // Contains All Content container: 'circles-container', // DIV That Contains Mini DIVs Circles circle: 'circle', // Center Big Circle mainContent:'main-circle-content', // Class Name For Mini Circles DIVs minCirclesClass: 'min-circle', // For Internal Use, Array Of Mini Circles DIVs minCircles: [], // [normal | enlarge-view] mainViewStyle: 'normal', // Animates Mini Circles? animateCircles: true, // Animation Type [rotateSelf] animateType: 'rotateAround', // Animation Status [pause | play] animateStatus: 'play', // Animation Delay Time (speed) [Number Of Seconds] speed: 3, // Stops Animation On Mouse Over [true | false] stopOnOverMain: true, stopOnOverMini: true, // [pulse, zoomOutIn, flip, rotate] minCirclesEffectOver: 'none', // [images | text] contentType: 'images', // Enlarge Center Area On Mouse Over mainContentOverAction: 'normal' }); 该响应式圆形js轮播图插件的github地址为：https://github.com/salamj/jcircle
