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

<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>

<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>

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   });  });

 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'   });  });