mislider jQuery響應式圓形圖片輪播圖特效製做（圖片輪播效果二）

 

一、介紹 mislider

　　mislider是一款效果很是酷的jQuery響應式圓形圖片輪播特效插件。該輪播圖特效可以將圖片以圓形圖片顯示，而後使圖片無限循環造成輪播圖或旋轉木馬特效。該輪播圖插件的特色有：

• 使用簡單
• 在同一個屏幕中支持多個輪播圖
• 輪播圖的內容能夠是單張圖片或複雜的HTML內容
• 輕量級
• 響應式設計
• 很是容易定製
• 豐富的回調函數
• 跨瀏覽器，支持IE8+瀏覽器

二、引入js和css文件：

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

三、構建HTML

 1 　　　　　<h1>mislider圖片輪播效果</h1>
 2         <div class="mis-stage">
 3               <ol class="mis-slider">
 4                 <li class="mis-slide">
 5                     <img src="img/m1.jpg" alt="故宮">
 6                 </li>
 7                 <li class="mis-slide">
 8                         <img src="img/m2.jpg" alt="黃山">
 9                     </li>
10                     <li class="mis-slide">
11                         <img src="img/m3.jpg" alt="石林">
12                     </li>
13                     <li class="mis-slide">
14                         <img src="img/m4.jpg" alt="圓明園">
15                     </li>
16                     <li class="mis-slide">
17                         <img src="img/m5.jpg" alt="千島湖">
18                     </li>
19               </ol>
20         </div>

調用mislider.css文件，會有默認的樣式效果，本身也能夠設計調整。

• mis-stage：可見區域的容器的class名稱。
• mis-slider：用於移動輪播圖的 slide 容器元素。
• mis-slide：每個 slide 元素。
• mis-container：有插件自動插入的容器元素。用於包裹每個slide 元素。
• mis-nav-buttons：先後箭頭導航按鈕的圖片。
• mis-nav-list：圓點導航按鈕。

四、寫入JS初始化插件

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

至此，根據默認參數值，已經有效果啦！看下圖：

五、配置mislider 輪播圖插件的參數

默認狀況下，該輪播圖插件使用的是有序列表的結構，若是你使用不一樣的元素結構，請確保要修改selectorSlider和selectorSlide選項。下面是每一個參數的具體用法：

  1 jQuery(function ($) {
  2   var slider = $('.mis-stage').miSlider({
  3   // 輪播圖過渡動畫的速度 
  4   // 單位毫秒. Options: positive integer.
  5   speed: 700,
  6   // 輪播圖在兩個過渡動畫之間的暫停時間 
  7   // in milliseconds. Options: false, positive integer. 
  8   // false = Autoplay off，設爲false則不自動播放.
  9   pause: 4000,
 10   // 輪播圖的增量 
 11   // Autoplay and Nav Buttons. 自動播放與導航按鈕 
 12   // Options: positive or negative integer. 
 13   // Positive integer = Slide left. 正數向左
 14   // Negative integer = Slide right. 負數向右
 15   increment: 1,
 16   // 輪播圖的高度 
 17   // Options: false or positive integer. 值：false或正整數
 18   // false = height is calculated using 設爲false自動計算高度
 19   // maximum slide heights.最大高度
 20   stageHeight: false,
 21   // 同時在屏幕上可見的輪播圖圖片數量
 22   // Options: false or positive integer. 值：false或正整數
 23   // false = Fit as many as possible. false爲自適應
 24   slidesOnStage: 1,
 25   // 連續運動-輪播圖在同一個方向上無限循環 
 26   // true = slides loop in one direction if possible.
 27   slidesContinuous: true,
 28   // 當前輪播圖在屏幕上的位置：left, center, right 
 29   // Options: 'left', 'right', 'center'.
 30   slidePosition: 'left',
 31   // 輪播圖開始播放的位置. 
 32   // Options: 'beg', 'mid', 'end' 
 33   // or slide number starting at 1 - '1','2', etc.
 34   slideStart: 'beg',
 35   // 當前slide的寬度，單位px 
 36   // Options: false or positive integer. 值：false或正整數
 37   // false = width is the maximum of 設爲false時爲最大寬度
 38   // the existing slide widths.
 39   slideWidth: false,
 40   // 當前slide的縮放因子-其它圖片會相應縮小
 41   // of the current slide
 42   // other slides are scaled down. 
 43   // Options: positive number 100 or higher. 
 44   // 100 = No scaling.
 45   slideScaling: 100,
 46   // slide的垂直偏移
 47   // as a percentage of slide height. 
 48   // Options: positive or negative number. 
 49   // Neg value = up. Pos value = down. 
 50   // 0 = No offset.
 51   offsetV: 0,
 52   // slide中的內容垂直居中
 53   // Boolean.
 54   centerV: false,
 55   // 原點導航按鈕是否可用
 56   // Boolean.
 57   navList: true,
 58   // 箭頭導航按鈕是否可用
 59   // Boolean.
 60   navButtons: true,
 61   // 箭頭導航一直顯示
 62   // except when transitioning - Boolean.
 63   navButtonsShow: false,
 64   // 箭頭導航按鈕的透明度 
 65   // button navigation when not transitioning. 
 66   // Options: Number between 0 and 1. 
 67   // 0 (transparent) - 1 (opaque).
 68   navButtonsOpacity: 0.5,
 69   // 輪播圖隨機順序
 70   // Boolean.
 71   randomize: false,
 72   // 輪播圖加載後的回調函數
 73   // called when slides have loaded.
 74   slidesLoaded: false,
 75   // 輪播圖過渡動畫前的回調函數
 76   // call back function - called before 
 77   // the slide transition.
 78   beforeTrans: false,
 79   // 輪播圖過渡動畫完成以後的回調函數
 80   // call back function - called at the end 
 81   // of a slide transition.
 82   afterTrans: false,
 83   // Stage元素上的class名稱
 84   // to the stage element.
 85   classStage: 'mis-stage',
 86   // The CSS class that will be Slider元素上的class名稱
 87   // applied to the slider element.
 88   classSlider: 'mis-slider',
 89   // The CSS class that will be 每個Slide元素上的class名稱
 90   // applied to each slide element.
 91   classSlide: 'mis-slide',
 92   // The CSS class that will be 箭頭導航按鈕元素上的class名稱
 93   // applied to the parent of the 
 94   // prev and next button navigation elements.
 95   classNavButtons: 'mis-nav-buttons',
 96   // The CSS class that will be 圓點導航按鈕上的class名稱
 97   // applied to the parent of the 
 98   // numbered list navigation elements
 99   classNavList: 'mis-nav-list',
100   // The selector used to select 用於選擇輪播圖的選擇器
101   // the slider element
102   // Descendant of the stage
103   selectorSlider: 'ol',
104   // The selector used to select 用於選擇每個Slide的選擇器
105   // each slide element
106   // Descendant of the slider
107   selectorSlide: 'li'
108   });
109  });

 這裏只使用了部分參數：

 1 　　stageHeight: 380,
 2             
 3    slidesOnStage: false,
 4             
 5    slidePosition: 'center',
 6 
 7    slideStart: 'mid',
 8 
 9    slideScaling: 150,
10 
11    offsetV: -5,
12             
13    centerV: true,
14 
15    navButtonsOpacity: 1

效果顯示：

還能夠在每一個li下面添圖片說明：

1 <li class="mis-slide">
2    <img src="img/m5.jpg" alt="千島湖">
3    <h3>千島湖</h3>
4 </li>

相應的也要將以前的js參數調整一下，或者有更多調整，效果顯示：

 

學習：http://www.htmleaf.com/jQuery/Slideshow-Scroller/201505151836.html