Skippr-最简洁实用的jQuery幻灯片插件 |幻灯片和轮播图|下载

简要教程

Skippr是一款简洁实用的jQuery幻灯片插件。该幻灯片的特点是易于使用，它需要的HTML代码非常简单，并提供各种参数来控制幻灯片的播放。

安装

可以通过bower来安装skippr幻灯片插件。

bower install skippr

使用方法

在页面中引入jQuery和skippr.css和skippr.js文件。

HTML结构

使用一个

容器来包裹幻灯片，每个幻灯片可以通过background-image属性来设置背景图片。

初始化插件

在页面DOM元素加载完毕之后，可以通过skippr()方法来初始化该幻灯片插件。

$(document).ready(function(){

    $("#theTarget").skippr();

});

配置参数

可以以对象的方式在skippr()中传入配置参数：

$("#theTarget").skippr({
    transition: 'slide',
    speed: 1000,
    easing: 'easeOutQuart',
    navType: 'block',
    childrenElementType: 'div',
    arrows: true,
    autoPlay: false,
    autoPlayDuration: 5000,
    keyboardOnAlways: true,
    hidePrevious: false
});

参数	类型	可取值	描述	默认值
transition	string	fade,slide	指定过渡动画的类型。幻灯片的过渡动画使用velocity.js来加速。	slide
speed	int	任何整数值	动画过渡的持续时间，单位毫秒。	500
easing	string	jQuery UI easing值	过渡动画的easing效果。	easeOutQuart
navType	string	block, bubble	导航按钮的样式。	block
childrenElementType	string	div, img	选择目标元素的子元素。	div
arrows	bool	true,false	是否显示前后箭头导航按钮。	true
autoPlay	bool	true,false	是否自动播放。	false
autoPlayDuration	int	任何整数值	自动播放时的切换时间。单位毫秒。	5000
keyboardOnAlways	bool	true,false	是否总是允许使用键盘方向键来导航。	true
hidePrevious	bool	true,false	是否在第一张幻灯片时隐藏向前导航按钮。	false