演 示 下 载
简介
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幻灯片插件
