你的位置:首页 > Java教程

[Java教程]Skippr


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

在线预览    源码下载

 安装

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

bower install skippr             

 使用方法

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

<link rel="stylesheet" type="text/css" href="dist/skippr.css" /><script type="text/javascript" src="path/to/jquery/1.11.0/jquery.min.js"></script><script type="text/javascript" src="dist/skippr.js"></script>                 
 HTML结构

使用一个<div>容器来包裹幻灯片,每个幻灯片可以通过background-image属性来设置背景图片。

<div id="container">  <div id="theTarget">    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div>  </div>  </div>                 
 初始化插件

在页面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});                 
参数类型可取值描述默认值
transitionstringfade,slide指定过渡动画的类型。幻灯片的过渡动画使用velocity.js来加速。slide
speedint任何整数值动画过渡的持续时间,单位毫秒。500
easingstringjQuery UI easing值过渡动画的easing效果。easeOutQuart
navTypestringblock, bubble导航按钮的样式。block
childrenElementTypestringdiv, img选择目标元素的子元素。div
arrowsbooltrue,false是否显示前后箭头导航按钮。true
autoPlaybooltrue,false是否自动播放。false
autoPlayDurationint任何整数值自动播放时的切换时间。单位毫秒。5000
keyboardOnAlwaysbooltrue,false是否总是允许使用键盘方向键来导航。true
hidePreviousbooltrue,false是否在第一张幻灯片时隐藏向前导航按钮。false

skippr幻灯片插件的github地址为:https://github.com/austenpayan/skippr

在线预览    源码下载