本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码。分享给大家供大家参考。具体如下：

运行效果截图如下：

mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件，mislider轮播图插件的特点有：

使用简单

在同一个屏幕中支持多个轮播图

轮播图的内容可以是单张图片或复杂的HTML内容

轻量级

响应式设计

非常容易定制

丰富的回调函数

跨浏览器，支持IE8+浏览器

引入核心文件

mislider插依赖于一些插件，在引入之前要先引入jQuery、html5shiv.js、mislider.min.js以及mislider.min.css，mislider-custom.css文件。

构建html

1. 

2. 

注意：上面的class并不是必须的，如果不写这些class，插件会自动为相应的元素添加class。默认情况下，该轮播图插件使用的是有序列表的结构，如果你使用不同的元素结构，请确保要修改selectorSlider和selectorSlide选项。

写入JS初始化插件

jQuery(function ($) {

var slider = $('.mis-stage').miSlider({

// The height of the stage in px. Options: false or positive integer. false = height is calculated using maximum slide heights. Default: false

stageHeight: 380,

// Number of slides visible at one time. Options: false or positive integer. false = Fit as many as possible. Default: 1

slidesOnStage: false,

// The location of the current slide on the stage. Options: 'left', 'right', 'center'. Defualt: 'left'

slidePosition: 'center',

// The slide to start on. Options: 'beg', 'mid', 'end' or slide number starting at 1 - '1','2','3', etc. Defualt: 'beg'

slideStart: 'mid',

// The relative percentage scaling factor of the current slide - other slides are scaled down. Options: positive number 100 or higher. 100 = No scaling. Defualt: 100

slideScaling: 150,

// The vertical offset of the slide center as a percentage of slide height. Options: positive or negative number. Neg value = up. Pos value = down. 0 = No offset. Default: 0

offsetV: -5,

// Center slide contents vertically - Boolean. Default: false

centerV: true,

// Opacity of the prev and next button navigation when not transitioning. Options: Number between 0 and 1. 0 (transparent) - 1 (opaque). Default: .5

navButtonsOpacity: 1

});

});

注意：要确保.mis-stage jQuery选择器和HTML页面中的轮播图容器的class名称相同。

参数

jQuery(function ($) {

var slider = $('.mis-stage').miSlider({

// 轮播图过渡动画的速度

// 单位毫秒. Options: positive integer.

speed: 700,

// 轮播图在两个过渡动画之间的暂停时间

// in milliseconds. Options: false, positive integer.

// false = Autoplay off，设为false则不自动播放.

pause: 4000,

// 轮播图的增量

// Autoplay and Nav Buttons. 自动播放与导航按钮

// Options: positive or negative integer.

// Positive integer = Slide left. 正数向左

// Negative integer = Slide right. 负数向右

increment: 1,

// 轮播图的高度

// Options: false or positive integer. 值：false或正整数

// false = height is calculated using 设为false自动计算高度

// maximum slide heights.最大高度

stageHeight: false,

// 同时在屏幕上可见的轮播图图片数量

// Options: false or positive integer. 值：false或正整数

// false = Fit as many as possible. false为自适应

slidesOnStage: 1,

// 连续运动-轮播图在同一个方向上无限循环

// true = slides loop in one direction if possible.

slidesContinuous: true,

// 当前轮播图在屏幕上的位置：left, center, right

// Options: 'left', 'right', 'center'.

slidePosition: 'left',

// 轮播图开始播放的位置.

// Options: 'beg', 'mid', 'end'

// or slide number starting at 1 - '1','2', etc.

slideStart: 'beg',

// 当前slide的宽度，单位px

// Options: false or positive integer. 值：false或正整数

// false = width is the maximum of 设为false时为最大宽度

// the existing slide widths.

slideWidth: false,

// 当前slide的缩放因子-其它图片会相应缩小

// of the current slide

// other slides are scaled down.

// Options: positive number 100 or higher.

// 100 = No scaling.

slideScaling: 100,

// slide的垂直偏移

// as a percentage of slide height.

// Options: positive or negative number.

// Neg value = up. Pos value = down.

// 0 = No offset.

offsetV: 0,

// slide中的内容垂直居中

// Boolean.

centerV: false,

// 原点导航按钮是否可用

// Boolean.

navList: true,

// 箭头导航按钮是否可用

// Boolean.

navButtons: true,

// 箭头导航一直显示

// except when transitioning - Boolean.

navButtonsShow: false,

// 箭头导航按钮的透明度

// button navigation when not transitioning.

// Options: Number between 0 and 1.

// 0 (transparent) - 1 (opaque).

navButtonsOpacity: 0.5,

// 轮播图随机顺序

// Boolean.

randomize: false,

// 轮播图加载后的回调函数

// called when slides have loaded.

slidesLoaded: false,

// 轮播图过渡动画前的回调函数

// call back function - called before

// the slide transition.

beforeTrans: false,

// 轮播图过渡动画完成之后的回调函数

// call back function - called at the end

// of a slide transition.

afterTrans: false,

// Stage元素上的class名称

// to the stage element.

classStage: 'mis-stage',

// The CSS class that will be Slider元素上的class名称

// applied to the slider element.

classSlider: 'mis-slider',

// The CSS class that will be 每一个Slide元素上的class名称

// applied to each slide element.

classSlide: 'mis-slide',

// The CSS class that will be 箭头导航按钮元素上的class名称

// applied to the parent of the

// prev and next button navigation elements.

classNavButtons: 'mis-nav-buttons',

// The CSS class that will be 圆点导航按钮上的class名称

// applied to the parent of the

// numbered list navigation elements

classNavList: 'mis-nav-list',

// The selector used to select 用于选择轮播图的选择器

// the slider element

// Descendant of the stage

selectorSlider: 'ol',

// The selector used to select 用于选择每一个Slide的选择器

// each slide element

// Descendant of the slider

selectorSlide: 'li'

});

});

以上就是为大家分享的超酷的jQuery响应式圆形图片轮播图插件miSlider，希望大家可以熟练使用miSlider插件在自己的作品中能灵活运用。