mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件。该轮播图特效可以将图片以圆形图片显示，然后使图片无限循环形成轮播图或旋转木马特效。该轮播图插件的特点有：
- 使用简单
- 在同一个屏幕中支持多个轮播图
- 轮播图的内容可以是单张图片或复杂的HTML内容
- 轻量级
- 响应式设计
- 非常容易定制
- 丰富的回调函数
- 跨浏览器，支持IE8+浏览器
使用方法
使用该轮播图插件之前要先引入jQuery和mislider.min.js以及mislider.min.css，mislider-custom.css文件。
<link href="css/mislider.css" rel="stylesheet">
<link href="css/mislider-custom.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/mislider.js"></script>
HTML结构
这个轮播图插件的HTML结构使用的是一个列表元素来放置图片，列表外面使用一个<div>元素来包裹。
<div class="mis-stage">
<ol class="mis-slider">
<li class="mis-slide">
<img src="images/1.jpg" alt="Lillies">
</li>
<li class="mis-slide">
<img src="images/2.jpg" alt="Pond">
</li>
</ol>
</div>
注意：上面的class并不是必须的，如果不写这些class，插件会自动为相应的元素添加class。默认情况下，该轮播图插件使用的是有序列表的结构，如果你使用不同的元素结构，请确保要修改selectorSlider和selectorSlide选项。
调用插件
在页面加载完毕之后可以使用下面的方法来初始化该轮播图插件：
jQuery(function ($) {
var slider = $('.mis-stage').miSlider();
});
注意：要确保.mis-stage jQuery选择器和HTML页面中的轮播图容器的class名称相同。
配置参数
下面是该轮播图插件可以被定制的参数：
- 轮播图过渡动画的速度
- 轮播图在两个过渡动画之间的暂停时间
- 轮播图的增量
- 轮播图的高度
- 同时在屏幕上可见的轮播图图片数量
- 连续运动-轮播图在同一个方向上无限循环
- 当前轮播图在屏幕上的位置-left, center, right
- 轮播图是否自动开始播放
- 当前slide的宽度
- 当前slide的缩放因子-其它图片会相应缩小
- slide的垂直偏移
- slide中的内容垂直居中
- 原点导航按钮是否可用
- 箭头导航按钮是否可用
- 箭头导航按钮的透明度
- 轮播图的随机顺序
- 轮播图加载后的回调函数
- 轮播图过渡动画前的回调函数
- 轮播图过渡动画完成之后的回调函数
- Stage元素上的class名称
- Slider元素上的class名称
- 每一个Slide元素上的class名称
- 箭头导航按钮元素上的class名称
- 圆点导航按钮上的class名称
- 用于选择轮播图的选择器
- 用于选择每一个Slide的选择器
默认参数配置：
<script>
jQuery(function ($) {
var slider = $('.mis-stage').miSlider({
// The speed of the slide transition
// in milliseconds. Options: positive integer.
speed: 700,
// slide pause time between transitions
// in milliseconds. Options: false, positive integer.
// false = Autoplay off.
pause: 4000,
// The number of slides to increment with
// Autoplay and Nav Buttons.
// Options: positive or negative integer.
// Positive integer = Slide left.
// Negative integer = Slide right.
increment: 1,
// The height of the stage in px.
// Options: false or positive integer.
// false = height is calculated using
// maximum slide heights.
stageHeight: false,
// Number of slides visible at one time.
// Options: false or positive integer.
// false = Fit as many as possible.
slidesOnStage: 1,
// Continuous motion - Boolean.
// true = slides loop in one direction if possible.
slidesContinuous: true,
// The location of the current slide on the stage.
// Options: 'left', 'right', 'center'.
slidePosition: 'left',
// The slide to start on.
// Options: 'beg', 'mid', 'end'
// or slide number starting at 1 - '1','2', etc.
slideStart: 'beg',
// The width of the current slide in px.
// Options: false or positive integer.
// false = width is the maximum of
// the existing slide widths.
slideWidth: false,
// The relative percentage scaling factor
// of the current slide
// other slides are scaled down.
// Options: positive number 100 or higher.
// 100 = No scaling.
slideScaling: 100,
// 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.
offsetV: 0,
// Center slide contents vertically
// Boolean.
centerV: false,
// Enable numbered list navigation
// Boolean.
navList: true,
// Enable prev and next button navigation
// Boolean.
navButtons: true,
// Always show prev and next button navigation
// except when transitioning - Boolean.
navButtonsShow: false,
// Opacity of the prev and next
// button navigation when not transitioning.
// Options: Number between 0 and 1.
// 0 (transparent) - 1 (opaque).
navButtonsOpacity: 0.5,
// Randomize the order of the slides
// Boolean.
randomize: false,
// The slides loaded call back function
// called when slides have loaded.
slidesLoaded: false,
// The slide transition before
// call back function - called before
// the slide transition.
beforeTrans: false,
// The slide transition complete
// call back function - called at the end
// of a slide transition.
afterTrans: false,
// The CSS class that will be applied
// to the stage element.
classStage: 'mis-stage',
// The CSS class that will be
// applied to the slider element.
classSlider: 'mis-slider',
// The CSS class that will be
// applied to each slide element.
classSlide: 'mis-slide',
// The CSS class that will be
// applied to the parent of the
// prev and next button navigation elements.
classNavButtons: 'mis-nav-buttons',
// The CSS class that will be
// 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
// each slide element
// Descendant of the slider
selectorSlide: 'li'
});
});
</script>
样式设置
你如果想自定义该轮播图的样式，可以创建一个mislider-custom.css的新样式表，然后在这个文件中添加你自己的样式。该轮播图插件默认使用下面的class名称：
- mis-stage：可见区域的容器的class名称。
- mis-slider：用于移动轮播图的 slide 容器元素。
- mis-slide：每一个 slide 元素。
- mis-container：有插件自动插入的容器元素。用于包裹每一个slide 元素。
- mis-nav-buttons：前后箭头导航按钮的图片。
- mis-nav-list：圆点导航按钮。
