jcircle.js是一款响应式圆形js轮播图插件。该轮播图插件能够将图片或文字以圆形轮播图的方式进行展示。并且该轮播图以响应式设计，可以自动进行圆形轮播。

使用方法

在页面中引入jCircle.css和jCircle.min.js文件

HTML结构

一个圆形轮播图的基本HTML结构如下：

  

  

    
 
       
         
      
      
Caption 1
    
    
 
       
         
      
      
Caption 2
    
    
 
       
         
      
      
Caption 3
    
    ...
  

                

初始化插件

在页面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