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

来源 : 作者 : admin时间 : 2016-05-21 16:39:02 人气指数 :

评论收藏

导语 Skidder是一款响应式无限轮播的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旋转木马插件的配置参数如下：

参数	描述
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	旋转木马尺寸改变时的回调函数