本文实例讲述了基于jquery实现响应式圆形图片轮播特效代码。分享给大家供大家参考。具体如下：
运行效果截图如下：
mislider是一款效果非常酷的jquery响应式圆形图片轮播图特效插件，mislider轮播图插件的特点有：
使用简单 在同一个屏幕中支持多个轮播图 轮播图的内容可以是单张图片或复杂的html内容 轻量级 响应式设计 非常容易定制 丰富的回调函数 跨浏览器，支持ie8+浏览器引入核心文件
mislider插依赖于一些插件，在引入之前要先引入jquery、html5shiv.js、mislider.min.js以及mislider.min.css，mislider-custom.css文件。

构建html
pink water lillies pond with lillies
注意：上面的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插件在自己的作品中能灵活运用。