dowebok

jQuery.slidizle – jQuery幻灯片插件

分类:代码 日期: 点击(26,663) 评论(1)

jQuery.slidizle - jQuery幻灯片插件

演 示 下 载

简介

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

浏览器兼容

IE Edge Chrome Firefox Opera Safari
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

标签:

相关文章

发表评论