Jcircle - 响应式圆形轮播图插件

PetitQ 幻灯片/轮播 2018-11-08 1.56K 0 0

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'
```
```
 
```
```
});
```

Github 地址：https://github.com/salamj/jcircle

Jcircle - 响应式圆形轮播图插件

已有 391 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

Jcircle - 响应式圆形轮播图插件

使用方法

HTML 结构

初始化插件

配置参数

Jcircle - 响应式圆形轮播图插件

相关文章

炫酷动画过渡效果jQuery幻灯片插件

炫酷jQuery+SVG遮罩轮播图特效

全宽图片重叠幻灯片jQuery特效

发表回复取消回复

热销模板

幻灯片/轮播

使用方法

HTML 结构

初始化插件

配置参数

Jcircle - 响应式圆形轮播图插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复