幻灯片/轮播

Skippr - 最简洁实用jQuery幻灯片插件

创客主机


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

使用方法:

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

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

HTML结构:

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

  1. <div id="container">
  2.     <div id="theTarget">
  3.         <div style="background-image: url(img/image1.jpg)"></div>
  4.         <div style="background-image: url(img/image2.jpg)"></div>
  5.         <div style="background-image: url(img/image3.jpg)"></div>
  6.         <div style="background-image: url(img/image4.jpg)"></div>
  7.         <div style="background-image: url(img/image5.jpg)"></div>
  8.     </div>    
  9. </div>

初始化插件:

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

  1. $(document).ready(function(){
  2.  
  3.     $("#theTarget").skippr();
  4.  
  5. });

配置参数:

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

  1. $("#theTarget").skippr({
  2.     transition: 'slide',
  3.     speed: 1000,
  4.     easing: 'easeOutQuart',
  5.     navType: 'block',
  6.     childrenElementType: 'div',
  7.     arrows: true,
  8.     autoPlay: false,
  9.     autoPlayDuration: 5000,
  10.     keyboardOnAlways: true,
  11.     hidePrevious: false
  12. });

详细参数:

参数类型可取值描述默认值
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

Github地址:https://github.com/austenpayan/skippr

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!