jQuery做出响应式图片轮播效果

运行效果截图如下：

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

引入核心文件
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: 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'
 });
 });

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

JS+JQuery动态操作表格行方法详解

jQuery实现表单里文字按钮特效合集