skippr – 更轻更快的jQuery幻灯片插件
简介
skippr 是一个基于 jQuery 的幻灯片插件,官方的口号是更轻、更快。它具有以下功能、特点:
- 支持左右滑动、淡入淡出两种切换方式
- 支持左右箭头导航
- 支持键盘方向键控制
- 支持自动播放
- 支持响应式
- 支持日志
兼容
浏览器兼容:skippr 使用了 CSS3 属性,所以它只支持 IE9 及以上版本的 IE 和其他主流现代浏览器。
jQuery 兼容:兼容 1.7 及以上版本。
使用方法
1、引入文件
<link rel="stylesheet" href="css/jquery.skippr.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.skippr.min.js"></script>
2、HTML
<div id="container"> <div id="skippr"> <div style="background-image: url(img/img1.jpg)"></div> <div style="background-image: url(img/img2.jpg)"></div> <div style="background-image: url(img/img3.jpg)"></div> <div style="background-image: url(img/img4.jpg)"></div> <div style="background-image: url(img/img5.jpg)"></div> </div> </div>
或者可以使用 img 方式,如:
<div id="container"> <div id="skippr"> <img src="img/img1.jpg" alt=""> <img src="img/img2.jpg" alt=""> <img src="img/img3.jpg" alt=""> <img src="img/img4.jpg" alt=""> <img src="img/img5.jpg" alt=""> </div> </div>
使用 img 方式需要在配置时设置属性 childrenElementType 为 img,具体可查看演示。
3、JavaScript
$(function(){ $('#skippr').skippr(); });
配置
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
transition | 字符串 | slide | 切换方式,可选 slide(幻灯片) 或 fade(淡入淡出) |
speed | 整数 | 1000 | 切换过度时间,以毫秒为单位 |
easing | 字符串 | easeOutQuart | 切换动画效果,支持所有 jquery UI 动画效果 |
navType | 字符串 | block | 项目导航方式,可选 block(块状)或 bubble(圆点) |
childrenElementType | 字符串 | div | 选择目标元素的子元素类型,可选 div 或 img |
arrows | 布尔值 | true | 显示左右控制箭头 |
autoPlay | 布尔值 | false | 自动播放 |
autoPlayDuration | 整数 | 5000 | 自动播放间隔,以毫秒为单位 |
keyboardOnAlways | 布尔值 | true | 键盘方向键控制 |
hidePrevious | 字符串 | block | 显示第一张幻灯片时隐藏“上一个”箭头 |
GitHub 地址:https://github.com/austenpayan/skippr