响应式无限轮播jQuery旋转木马插件

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();
                

要确保图片在插件初始化之前就被全部加载，否则不能正确的计算图片的高度。可以使用imagesloaded.js来完成这项工作。

$('.slideshow').each( function() {
  var $slideshow = $(this);
  $slideshow.imagesLoaded( function() {
    $slideshow.skidder();
  });
});                  
                

要动态改变图片的尺寸大小，插件中使用了第三方的smartresize：

$(window).smartresize(function(){
  $('.slideshow').skidder('resize');
});                  
                

配置参数

Skidder旋转木马插件的配置参数如下：

skidder旋转木马插件的github地址为：https://github.com/null2/skidder