请记住我们的网址:3zcode.com。也就是“三只源码"

jQuery.slidizle – jQuery幻灯片插件

源码 admin 2310℃ 0评论

jQuery.slidizle – jQuery幻灯片插件

演 示 下 载

简介

jQuery.slidizle 是一款 jQuery 幻灯片插件,你可以在幻灯片内放任何内容,因为它提供了多种方法让你可以随意的控制幻灯片,而正因为它的高度自定义,所以上手也比其他幻灯片插件更难一些。

浏览器兼容

jQuery.slidizle – jQuery幻灯片插件 jQuery.slidizle – jQuery幻灯片插件 jQuery.slidizle – jQuery幻灯片插件 jQuery.slidizle – jQuery幻灯片插件 jQuery.slidizle – jQuery幻灯片插件 jQuery.slidizle – jQuery幻灯片插件
IE9+ Edge Chrome Firefox Opera Safari

使用方法

1、引入文件

<link rel="stylesheet" href="css/font-awesome.min.css"> 
<link rel="stylesheet" href="css/style.min.css"> 
<script src="js/jquery.min.js"></script> 
<script src="js/jquery.slidizle.js"></script>

2、HTML

<div class="dowebok" data-slidizle> ?? ?
<ul data-slidizle-content> ?? ??? ?
<li style="background-image: url('img/01.jpg')"></li> ?? ??? ?
<li style="background-image: url('img/02.jpg')"></li> ?? ??? ?
<li style="background-image: url('img/03.jpg')"></li> ?? ?
</ul>  ?? ?
<div data-slidizle-next> ?? ??? ?
<i class="fa fa-arrow-right"></i> ?? ?
</div> ?? ?
<div data-slidizle-previous> ?? ??? ?
<i class="fa fa-arrow-left"></i> ?? ?
</div>  ?? ?
<ul data-slidizle-navigation></ul> 
</div>

3、JavaScript

$('.dowebok').slidizle();

配置

名称 类型 默认值 说明
timeout 整数 null 幻灯片播放间隔
pauseOnHover 布尔值 false 鼠标悬停暂停播放
nextOnClick 布尔值 false 鼠标悬停暂停播放
loop 布尔值 false 循环播放
autoPlay 布尔值 false 自动播放
keyboardEnabled 布尔值 true 键盘支持
touchEnabled 布尔值 true 触摸事件支持
loadBeforeTransition 布尔值 true 预加载
disabled 布尔值 false
onInit 函数 null 幻灯片被单击后的回调函数
beforeChange 函数 null 幻灯片切换前的回调函数
onChange 函数 null 幻灯片切换时的回调函数
afterChange 函数 null 幻灯片切换后的回调函数
beforeLoading 函数 null 加载幻灯片钱的回调函数
onLoading 函数 null 加载幻灯片时的回调函数
afterLoading 函数 null 加载幻灯片后的回调函数
onNext 函数 null
onPrevious 函数 null
onPlay 函数 null 开始自动播放时的回调函数
onPause 函数 null 暂停播放时的回调函数
onResume 函数 null 恢复后的回调函数

演 示 下 载

GitHub 地址:https://github.com/olivierbossel/slidizle

转载请注明:三只源码 » jQuery.slidizle – jQuery幻灯片插件

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址