jQuery超酷响应式圆形图片轮播图特效

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

jQuery(function ($) {

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

});

    轮播图过渡动画的速度

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

    轮播图的增量

    轮播图的高度

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

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

    当前轮播图在屏幕上的位置-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>