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。默认情况下,该轮播图插件使用的是有序列表的结构,如果你使用不同的元素结构,请确保要修改selectorSliderselectorSlide选项。

调用插件

在页面加载完毕之后可以使用下面的方法来初始化该轮播图插件:

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:圆点导航按钮。