Skidder是一款響應式無限輪播的jQuery旋轉木馬插件。它可以自動將圖片居中對齊，組成首尾相接的一組圖片，通過導航按鈕或移動觸摸滑動來前后切換圖片。它的特點還有：
- 圖片自動居中對齊。
- 無限循環輪播。
- 響應式設計，圖片自動適應窗口大小。
- 可以在移動設備上觸摸滑動。
- 兼容IE8+的IE瀏覽器。
使用方法
使用該旋轉木馬插件需要在頁面中引入jquery.skidder.css和jquery，以及jquery.skidder.js文件。
- <link rel="stylesheet" href="path/to/jquery.skidder.css">
- <script src="path/to/jquery.skidder.js"></script>
- <script src="path/to/jquery.skidder.js"></script>
HTML結構
該旋轉木馬的基本HTML結構如下：
- <div class="slideshow" style="display: none;">
- <div class="slide"><img src="1.jpg"></div>
- <div class="slide"><img src="2.jpg"></div>
- <div class="slide"><img src="3.jpg"></div>
- </div>
初始化插件
在頁面DOM元素加載完畢之后，通過skidder()方法來初始化該旋轉木馬插件。
- $('.slideshow').skidder();
要確保圖片在插件初始化之前就被全部加載，否則不能正確的計算圖片的高度�？梢允褂胕magesloaded.js來完成這項工作。
- $('.slideshow').each( function() {
- var $slideshow = $(this);
- $slideshow.imagesLoaded( function() {
- $slideshow.skidder();
- });
- });
要動態改變圖片的尺寸大小，插件中使用了第三方的smartresize：
- $(window).smartresize(function(){
- $('.slideshow').skidder('resize');
- });
配置參數
Skidder旋轉木馬插件的配置參數如下：
| 參數 | 描述 |
| slideClass | slide元素的class名稱。默認為".slide" |
| animationType | 該插件支持CSS動畫和jQuery動畫�？蛇x值為： 'animate', 'css'。默認值為 'animate' |
| lazyLoad | 懶加載，默認值為false |
| lazyLoadAutoInit | 默認值為true |
| lazyLoadWindow | 默認值為1 |
| scaleSlides | 是否根據maxWidth, maxHeight和scaleTo參數縮放slide為統一的值。默認為true。 |
| scaleTo | 定義縮放模式。有2種模式：最小模式和響應式模式�？蛇x值為："smallest"和[x, y]。"smallest"表示高度最小的圖片絕對幻燈片的高度。[x, y]表示使用一個數組中的兩個數值來定義幻燈片的比例。默認為"smallest"模式。 |
| maxWidth | 現在幻燈片的最大寬度，0或"none"表示不限制。默認為800 |
| maxHeight | 現在幻燈片的最大高度，0或"none"表示不限制。默認為500 |
| preservePortrait | 在響應式模式中該參數有效。決定小于比例的圖片的填充模式。true表示適應視口高度，水平方向上留空白。默認為false。 |
| paging | 設置為true時，插件會查找pagingElement元素的包裹元素pagingWrapper來設置padding。如果這兩個元素不存在，插件會自動創建它們。默認為true。 |
| pagingWrapper | 分頁圓點的包裹元素，默認為'.skidder-pager' |
| pagingElement | 分頁圓點元素，默認為'.skidder-pager-dot' |
| swiping | 是否在移動觸摸設備上允許swiping。默認為true |
| leftaligned | 如果不希望幻燈片居中，設置為true，默認為false |
| cycle | 是否循環顯示，默認為true。 |
| jumpback | 在非循環模式時，最后一張幻燈片會顯示'return to first slide'箭頭。默認為false |
| speed | 過渡動畫的速度，默認為400 |
| autoplay | 是否總播放，默認為false |
| autoplayResume | 是否在互動后恢復自動播放，默認為false |
| interval | 自動播放的時間間隔，默認為4000 |
| transition | 過渡動畫效果，'slide' 或 'fade' |
| directionClasses | 在過渡動畫結束后為slides添加 'left-from-active' 和 'right-from-active' class類。 |
| afterSliding | 旋轉木馬改變后的回調函數 |
| afterInit | 旋轉木馬初始化后的回調函數 |
| afterResize | 旋轉木馬尺寸改變時的回調函數 |
本站歡迎任何形式的轉載，但請務必注明出處，尊重他人勞動成果
轉載請注明： 文章轉載自：愛思資源網 http://www.randomwithlife.com/show-79-817-1.html
轉載請注明： 文章轉載自：愛思資源網 http://www.randomwithlife.com/show-79-817-1.html
