响应式圆形js轮播图特效插件

响应式圆形js轮播图特效插件

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

使用方法
在页面中引入jCircle.css和jCircle.min.js文件

1
2
<link href="jCircle.css" rel="stylesheet">
<script src="jCircle.min.js"></script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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示例对象,并初始化该圆形轮播图插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
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();

文件信息:

    2

    发表评论