jQuery幻灯片插件 jQuery.slidizle 支持多种切换方式

 Array   高蒙   阅读(1090)   评论(0)   2016-12-13 18:03:17    jQuery 幻灯片 jQuery.slidizle jQuery插件 


简介

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

浏览器兼容

IEEdgeChromeFirefoxOperaSafari
IE9+EdgeChromeFirefoxOperaSafari

使用方法

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恢复后的回调函数



相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客