幻灯片/轮播

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

面包多

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. });

详细参数:

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

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

(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!