Skidder - 无限轮播jQuery旋转木马插件

PetitQ 幻灯片/轮播 2018-11-06 1.97K 0 0

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 旋转木马插件的配置参数如下：

参数	描述
slideClass	slide 元素的 class 名称。默认为".slide"
animationType	该插件支持 CSS 动画和 jQuery 动画。可选值为： 'animate', 'css'。默认值为 'animate'
lazyLoad	懒加载，默认值为 false
lazyLoadAutoInit	默认值为 true
lazyLoadWindow	默认值为 1
scaleSlides	是否根据 maxWidth, maxHeight 和 scaleTo 参数缩放 slide 为统一的值。默认为 true。
scaleTo	定义缩放模式。有 2 种模式：最小模式和响应式模式。可选值为："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	旋转木马尺寸改变时的回调函数