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. 贪心算法-最小生成树Kruskal算法和Prim算法

    Kruskal算法: 不断地选择未被选中的边中权重最轻且不会形成环的一条. 简单的理解: 不停地循环,每一次都寻找两个顶点,这两个顶点不在同一个真子集里,且边上的权值最小. 把找到的这两个顶点联合起来 ...

  2. VMware虚拟机Mac OS X无法调整扩展硬盘大小,更新xcode时出现磁盘空间不足

    使用VMware虚拟机搭建的MacOSX,安装xcode时出现磁盘空间不足的错误. 因为很多朋友在初次安装MacOSX的时候都默认选择40G的磁盘大小,结果用了没两天之后就发现磁盘不够用了. 这时,百 ...

  3. 动态分配的顺序线性表的十五种操作—C语言实现

    线性表 定义:是最常用的,也是最简单的数据结构,是长度为n个数据元素的有序的序列. 含有大量记录的线性表叫文件 记录:稍微复杂的线性表里,数据元素为若干个数据项组成,这时把一个数据元素叫记录 结构特点 ...

  4. Django快速开发之投票系统

    https://docs.djangoproject.com/en/1.8/intro/tutorial01/ 参考官网文档,创建投票系统. ================ Windows  7/1 ...

  5. Azure Backup (1) 将SQL Server 2012虚拟机中数据库备份到Azure Storage

    <Windows Azure Platform 系列文章目录> 本文介绍的是由国内世纪互联运维的China Azure,相比国外的Global Azure.主要区别是存储账号的DNS地址不 ...

  6. hadoop的概念

    hadoop的概念 网上会经常遇到各种hadoop的概念,Hive,HBase,Hdfs都各是什么呢? 首先从hdfs说起,hdfs是分布式文件系统,它把集群当作单机一样做文件操作,文件可能存在于多个 ...

  7. sticky组件的改进实现

    上上篇博客介绍了一个sticky组件的简洁实现,经过这两天的思考,发现上次提供的实现还有较多不足的地方,另外跟别的网站上实现的效果在取消固定的时候也有一些不同,上次提供的取消固定的处理方式不好,本文在 ...

  8. 使用Python进行GUI操作自动化

    前言 本文介绍怎样使用Python进行跨平台的GUI操作的,其中使用的一个工具包是pyautogui,PyAutoGUI可以模拟鼠标的移动.点击.拖拽,键盘按键输入.按住操作,以及鼠标+键盘的热键同时 ...

  9. 58同城高性能移动Push推送平台架构演进之路

    本文详细讲述58同城高性能移动Push推送平台架构演进的三个阶段,并介绍了什么是移动Push推送,为什么需要,原理和方案对比:移动Push推送第一阶段(单平台)架构如何设计:移动Push推送典型性能问 ...

  10. js 模板引擎 为什么选择 dot

    我的上篇博文详细介绍了jquery tmpl,因为我想在我的项目里引入JS模版,所以就研究了一下,有人告诉我这个引擎的速度很慢,于是我又去搜集了一下资料,结果发现jquery tmpl是最慢的,于是乎 ...