jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换

在线实例

默认效果 水平/左右切换 垂直/上下切换 循环
自动播放 缩略图 进度条 回调函数

使用方法

<div class="sucaihuo" 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>
<script src="js/jquery.slidizle.js"></script> 
<script> 
    $(function() { 
        $('.sucaihuo').slidizle(); 
    }); 
</script>

参数详解

参数 描述 默认值
timeout 幻灯片播放间隔 null
pauseOnHover 鼠标悬停暂停播放 false
nextOnClick 鼠标悬停暂停播放 false
loop 循环播放 false
autoPlay 自动播放 false
keyboardEnabled 键盘支持 true
touchEnabled 触摸事件支持 true
loadBeforeTransition 预加载 true

disabled

onInit 幻灯片被单击后的回调函数 null
beforeChange 幻灯片切换前的回调函数 null
onChange 幻灯片切换时的回调函数 null
afterChange 幻灯片切换后的回调函数 null
beforeLoading 加载幻灯片钱的回调函数 null
onLoading 加载幻灯片时的回调函数 null
afterLoading 加载幻灯片后的回调函数 null

onNext

onPrevious

onPlay 开始自动播放时的回调函数 null
onPause 暂停播放时的回调函数 null
onResume 恢复后的回调函数 null

一款经典的jQuery slidizle 幻灯片的更多相关文章

  1. 经典实用jQuery soChange幻灯片实例演示

    soChange一款多很经典的幻灯片的jQuery插件. 实例预览 引入文件 <link rel="stylesheet" type="text/css" ...

  2. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

  3. 一款经典的 jQuery Lightbox 灯箱效果

    一个灯箱效果的图片展示插件. 版本: jQuery v1.2.3+ jQuery Lightbox v2.7.1 github 实例预览 使用方法 载入 CSS 文件 <link rel=&qu ...

  4. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  5. 18款 非常实用 jquery幻灯片图片切换

    1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...

  6. 60款很酷的 jQuery 幻灯片演示和下载【转】

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...

  7. 拍案惊奇!9款神奇的jQuery/CSS3经典插件

    款非常给力的jQuery/CSS3经典插件,插件包括CSS3图片特效.jQuery动画菜单.jQuery时尚登录表单等,一起来看看这些jQuery插件. .CSS3图片重力感应特效 这是一款应用重力感 ...

  8. 16款最佳的 jQuery Time Picker 时间选择插件

    jQuery 插件可以为你做许多事情,你可以很容易地把这些插件集成到您的网站.网络上的 jQuery 日期选择器和日历插件很多,但找不到很满意的时间选择器插件. 在这里,我们收集了最好的一组 jQue ...

  9. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

随机推荐

  1. Oracle 11g系列:约束

    约束是每个数据库必不可少的一部分,约束的目的在于保存数据的完整性.数据完整性是指数据的精确性和可靠性.数据库约束主要包括:主键约束.外键约束.唯一性约束.检查约束和默认值约束. 1.主键约束 主键约束 ...

  2. Package gp in the OpenCASCADE

    Package gp in the OpenCASCADE eryar@163.com China 一.简介 Introduction to Package gp gp是几何处理程序包(Geometr ...

  3. 将数据转化成字符串时:用字符串的链接 还是 StringBuilder

    /* 目的:将数据转化成字符串时:用字符串的链接 还是 StringBuilder呢? */ public class Test{ public static void main(String[] a ...

  4. 总结整理 -- python系列

    python系列 python--基础学习(一)开发环境搭建,体验HelloWorld python--基础学习(二)判断 .循环.定义函数.继承.调用 python--基础学习(三)字符串单引号.双 ...

  5. Yii2的深入学习--继承关系

    想要了解 Yii2 的话,一定要对 Yii2 中相关类的继承关系有所了解.由于暂时读的代码有限,下面的图中只列出了部分继承关系,之后回跟着源码阅读的越来越多而增加 由上图可以看到 Yii2 中大多数类 ...

  6. Android进程间通信之LocalSocket通信

    LocalSocket,在Unix域名空间创建的一个套接字(非服务端). 是对Linux中Socket进行了封装,采用JNI方式调用,实现进程间通信. 具体就是Native层Server和Framew ...

  7. 漫谈可视化Prefuse(三)---Prefuse API数据结构阅读有感

    前篇回顾:上篇<漫谈可视化Prefuse(二)---一分钟学会Prefuse>主要通过一个Prefuse的具体实例了解了构建一个Prefuse application的具体步骤.一个Pre ...

  8. nodejs 回调地狱解决 promise async

    nodejs毁掉地狱是一直被人诟病的,以下总结一下解决毁掉地狱的一些方法.(暂时研究的比较浅) 1.promise promise模式在任何时刻都处于以下三种状态之一:未完成(unfulfilled) ...

  9. 新人学习Android开发遇到的小问题总结

    1. IDE搭建: 搭建android的IDE时,先注意是什么版本的系统,64/32位系统. 通常使用的是Eclipse for android,Android Studio由于还需要FQ,网速慢,所 ...

  10. IE9父容器overflow:auto时,子容器状态更改导致滚动条下出现额外空间的问题探讨

    IE的每次跟新都会有一些奇葩的bug,我们默默承受了. 这个问题在项目中出现困扰了我近一个星期,这里记录一下.看下面实例 <style> .panel{ width: 200px; ove ...