注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery响应式全屏幻灯片插件Glide

媒体 fishcity 3297浏览

jquery响应式全屏幻灯片

Glide是一款响应式和对移动设备友好的jquery插件,它是基于CSS3的动画转场,同时也向后兼容旧版本的浏览器。Glide简单,轻量级和速度快等优点,用来做幻灯片滑块是最好不过了。

jquery实例:Glide使用方法

引入核心文件

<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.glide.js"></script>

写入html

<div class="slider">
  <ul class="slider__wrapper">
    <li class="slider__item"></li>
    <li class="slider__item"></li>
    <li class="slider__item"></li>
  </ul>
</div>

初始化插件

//基本初始化,使用默认值
 $('.slider').glide();
 
 //带参数初始化
 $('.slider').glide({
        autoplay: 5000,
        arrows: 'body',
        navigation: 'body'
    });

选项参数

名称 默认值 类型 描述
autoplay 4000 int/bool 是否自动播放
hoverpause true bool 鼠标悬浮暂停播放
circular true bool 循环播放
animationDuration 500 int 动画时间,单位毫秒
animationTimingFunc cubic-bezier(0.165, 0.840, 0.440, 1.000) string 动画方式函数
arrows true bool/string 显示/隐藏/ 箭头。也可通过样式类来添加html标签
arrowsWrapperClass slider__arrows string 箭头的样式类
arrowMainClass slider__arrows-item string 两个箭头的主样式类
arrowRightClass slider__arrows-item–right string 右箭头样式类
arrowLeftClass slider__arrows-item–left string 左箭头样式类
arrowRightText next string 右箭头文本
arrowLeftText prev string 左箭头文本
navigation true bool/string 展示/隐藏/添加导航. true为使用子弹模式导航,false不使用。可通过ID或CLASS来添加html标签
navigationCenter true bool 导航居中
navigationClass slider__nav string 导航块的样式
navigationItemClass slider__nav-item string 导航项目的样式
navigationCurrentItemClass slider__nav-item–current string 当前导航项目的样式
keyboard true bool 是否使用键盘的左右箭头键
touchDistance 60 int/bool 最小触摸滑动距离调用事件。false关闭触摸。
beforeInit function(){} function 插件初始化前调用
afterInit function(){} function 插件初始化后调用
beforeTransition function(){} function 滑块改变前调用
afterTransition function(){} function 滑块改变后调用

API

实例化PAI后,便可使用了,代码如下:

var glide = $('.slider').glide().data('api_glide');
glide.jump(3, console.log('Wooo!'));

.current() – 返回当前滑块的index值

.reinit() – 重置滑块

.destroy() – 销毁滑块

.play() – 自动播放

.pause() – 暂停

.next(callback) – 向后滑

.prev(callback) – 向前滑

.jump(distance, callback) – 跳到指定滑块

.nav(target) – 添加导航到指定目标 (eq. 'body', '.class', '#id')

.arrows(target) – 添加箭头到指定目标 (eq. 'body', '.class', '#id')

转载请注明:jQ酷 » jquery响应式全屏幻灯片插件Glide

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。