js圆形轮播图插件jCircle.js

所属分类:媒体-幻灯片和轮播图

 3883  28  查看评论 (1)
js圆形轮播图插件jCircle.js ie兼容12

使用方法

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

<link href="jCircle.css" rel="stylesheet">

HTML结构

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

<div id="circles-container">
 <div id="main-circle-content"></div>
 <div id="circle">
   <div  data-inside="min-circle"> 
     <a href="imgs/1.jpg"> 
       <img src="imgs/thumb_1.jpg" alt=""> 
     </a>
     <div >Caption 1</div>
   </div>
   <div  data-inside="min-circle"> 
     <a href="imgs/2.jpg"> 
       <img src="imgs/thumb_2.jpg" alt=""> 
     </a>
     <div >Caption 2</div>
   </div>
   <div  data-inside="min-circle"> 
     <a href="imgs/3.jpg"> 
       <img src="imgs/thumb_3.jpg" alt=""> 
     </a>
     <div >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'  
});
相关插件-幻灯片和轮播图

jquery适合风景展现的图片切换特效

图片切换,带有标题和缩略图,效果很好,修改非常简单,兼容各大浏览器
  幻灯片和轮播图
 10673  45

jQuery.slidizle可完全自定义的响应式jQuery幻灯片插件

jQuery.slidizle是一款可完全自定义的响应式jQuery幻灯片插件。该插件只是将一些class类放置到幻灯片的HTML标签中,用户可以通过修改这些class来修改幻灯片的外观。
  幻灯片和轮播图
 15419  88

lightslider支持移动触摸的轻量级jQuery幻灯片插件

lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马。
  幻灯片和轮播图
 10035  84

jQuery适合移动设备触摸屏的响应式幻灯片插件

jQuery适合移动设备触摸屏的响应式幻灯片插件
  幻灯片和轮播图
 15973  160

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    O_O 0
    2018/6/13 16:49:46
    效果不错,如果能在平板及手机上正常显示那就正合适了。 回复
取消回复