基于jQuery实现响应式圆形图片轮播特效

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

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

使用简单
在同一个屏幕中支持多个轮播图
轮播图的内容可以是单张图片或复杂的HTML内容
轻量级
响应式设计
非常容易定制
丰富的回调函数
跨浏览器，支持IE8+浏览器

引入核心文件
mislider插依赖于一些插件，在引入之前要先引入jQuery、html5shiv.js、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="../lib/html5shiv/html5shiv.js"></script><script src="js/jquery.min.js"></script><script src="js/mislider.js"></script>

构建html

<ol class="mis-slider"> <！-- slider 元素 - class是一个参数选项 --> <li class="mis-slide"><！-- 一个旋转元素 - class是一个参数选项 --><a href="#" class="mis-container"> <！-- A slide container - this element is optional, if absent the plugin adds it automatically --> <figure><！-- Slide content - whatever you want --><img src="images/garden01.jpg" alt="Pink Water Lillies"><figcaption>Pink Water Lillies</figcaption> </figure></a> </li> <li class="mis-slide"><a href="#" class="mis-container"> <figure><img src="images/garden02.jpg" alt="Pond with Lillies"><figcaption>Pond with Lillies</figcaption> </figure></a> </li> </ol>

注意：上面的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: falsestageHeight: 380,// Number of slides visible at one time. Options: false or positive integer. false = Fit as many as possible. Default: 1slidesOnStage: 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: 100slideScaling: 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: 0offsetV: -5,// Center slide contents vertically - Boolean. Default: falsecenterV: true,// Opacity of the prev and next button navigation when not transitioning. Options: Number between 0 and 1. 0 （transparent） - 1 （opaque）. Default: .5navButtonsOpacity: 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 elementsclassNavList: "mis-nav-list",// The selector used to select 用于选择轮播图的选择器// the slider element// Descendant of the stageselectorSlider: "ol",// The selector used to select 用于选择每一个Slide的选择器// each slide element// Descendant of the sliderselectorSlide: "li" }）;}）;

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