mislider jQuery响应式圆形图片轮播图特效制作（图片轮播效果二）

 

1、介绍 mislider

　　mislider是一款效果非常酷的jQuery响应式圆形图片轮播特效插件。该轮播图特效可以将图片以圆形图片显示，然后使图片无限循环形成轮播图或旋转木马特效。该轮播图插件的特点有：

• 使用简单
• 在同一个屏幕中支持多个轮播图
• 轮播图的内容可以是单张图片或复杂的HTML内容
• 轻量级
• 响应式设计
• 非常容易定制
• 丰富的回调函数
• 跨浏览器，支持IE8+浏览器

2、引入js和css文件：

• jquery.min.js
• mislider.js
• mislider.css
• mislider-custom.css

3、构建HTML

　　　　　<h1>mislider图片轮播效果</h1>
        <div class="mis-stage">
              <ol class="mis-slider">
                <li class="mis-slide">
                    <img src="img/m1.jpg" alt="故宫">
                </li>
                <li class="mis-slide">
                        <img src="img/m2.jpg" alt="黄山">
                    </li>
                    <li class="mis-slide">
                        <img src="img/m3.jpg" alt="石林">
                    </li>
                    <li class="mis-slide">
                        <img src="img/m4.jpg" alt="圆明园">
                    </li>
                    <li class="mis-slide">
                        <img src="img/m5.jpg" alt="千岛湖">
                    </li>
              </ol>
        </div>

调用mislider.css文件，会有默认的样式效果，自己也可以设计调整。

• mis-stage：可见区域的容器的class名称。
• mis-slider：用于移动轮播图的 slide 容器元素。
• mis-slide：每一个 slide 元素。
• mis-container：有插件自动插入的容器元素。用于包裹每一个slide 元素。
• mis-nav-buttons：前后箭头导航按钮的图片。
• mis-nav-list：圆点导航按钮。

4、写入JS初始化插件

　　　　 <script>
            jQuery(function($){
                var slider = $(".mis-stage").miSlider();
            })
        </script>

至此，根据默认参数值，已经有效果啦！看下图：

5、配置mislider 轮播图插件的参数

默认情况下，该轮播图插件使用的是有序列表的结构，如果你使用不同的元素结构，请确保要修改selectorSlider和selectorSlide选项。下面是每个参数的具体用法：

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

 这里只使用了部分参数：

　　stageHeight: 380,
            
   slidesOnStage: false,
            
   slidePosition: 'center',

   slideStart: 'mid',

   slideScaling: 150,

   offsetV: -5,
            
   centerV: true,

   navButtonsOpacity: 1

效果显示：

还可以在每个li下面添图片说明：

<li class="mis-slide">
   <img src="img/m5.jpg" alt="千岛湖">
   <h3>千岛湖</h3>
</li>

相应的也要将之前的js参数调整一下，或者有更多调整，效果显示：

 

学习：http://www.htmleaf.com/jQuery/Slideshow-Scroller/201505151836.html