Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb。它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备

在线实例

默认 圆点导航位置 动画方式 深色主题 HTML data属性

使用方法

  1. <div class="flicker-example">
  2. <ul>
  3. <li data-background="img/field.jpg">
  4. <div class="flick-title">Flickerplate</div>
  5. <div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
  6. </li>
  7. <li data-background="img/forest.jpg">
  8. <div class="flick-title">可修改 Javascript 或 CSS</div>
  9. <div class="flick-sub-text">查看参数,看看如何修改成你需要的效果</div>
  10. </li>
  11. <li data-background="img/frozen-water.jpg">
  12. <div class="flick-title">触摸事件</div>
  13. <div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
  14. </li>
  15. </ul>
  16. </div>
复制
  1. $(function() {
  2. $('.flicker-example').flicker();
  3. });
复制

参数详解

参数 描述 默认值
arrows 显示左右箭头控制 true
arrows_constraint 左右到头了禁止点击 false
auto_flick 自动播放 true
auto_flick_delay 自动播放间隔,以秒为单位 10
block_text 文字显示背景阴影 true
dot_navigation 显示圆点导航 true
dot_alignment 圆点导航位置 center
flick_animation 动画切换方式,可选 transition-slide、transform-slide、jquery-slide、scroller-slide 4种 transition-slide

flick_position

inner_width

theme 设置主题,可选 light、dark 2种 light

jQuery Flickerplate 幻灯片的更多相关文章

  1. 一款经典的jQuery slidizle 幻灯片

    jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换 在线实例 默认效果 水平/左右切换 垂直/上下切换 循环 自动播放 缩略图 进度条 回调函数 使用方法 < ...

  2. Jquery Slick幻灯片插件

    slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...

  3. jquery特效 幻灯片效果

    jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

  4. jquery bxslider幻灯片样式改造

    找了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样 ...

  5. 经典的一款jQuery soChange幻灯片

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

  6. jQuery orbit 幻灯片

    在线实例 默认 带缩略图 带描述 使用方法 <div class="wrap" style="width: 565px; height: 290px; margin ...

  7. 【jquery】幻灯片效果

    闲着无聊,用Jquery写了一个幻灯片效果. 我这人喜欢造轮子,除了jquery这种有强大开发团队的框架级别JS,其实的一些小程序都是尽量自己写. 一是因为怕出问题了没人问,二是自己写的改起来也方便. ...

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

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

  9. jquery实现幻灯片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. IOS 使用SDWebImage实现仿新浪微博照片浏览器

    使用第三方库SDWebImage实现仿新浪微博照片浏览器,可以下载图片缓存,点击之后滚动查看相片,具体效果如下: 代码如下: WeiboImageView.h: #import <UIKit/U ...

  2. safenet 超级狗 java调用 小计

    最近使用safenet 的 超级狗 在调用api的时候遇到了一些小问题记录一下. 首先safeNetdemo中的api是针对demo的 不能用于部署使用 ,真正用户部署使用的是在用工具包,超级狗开发商 ...

  3. Go语言TCP/UDP Socket编程

    1. TCP编程 TCPClient // TCPClient project main.go package main import ( "fmt" "net" ...

  4. 配置 Sublime Text 用 Node.js 执行 JavaScript 程序

    1. 首先到 nodejs.org 下载 Node.js 安装包并安装. 2. 打开 Sublime Text 2 编辑器.选择菜单 Tools --> Build System --> ...

  5. Java框架篇---Mybatis 构建SqlSessionFactory

    从 XML 中构建 SqlSessionFactory 基于 MyBatis 的应用都是以一个 SqlSessionFactory 的实例为中心的.SqlSessionFactory 的实例可以通过 ...

  6. MyBatis知多少(9)不同类型的数据库

    并非所有的数据库都如此复杂,需要使用昂贵的数据库管理系统以及企业级的硬件.一些数 据库其实非常小,足以运行在一台老式的PC机上.所有的数据库都是不一样的.它们有各自不 同的需求和不同的挑战.iBATI ...

  7. Core Animation 学习

    core animation 是在UIKit层之下的一个图形库,用于在iOS 和 OS X 实现动画. Core Animation管理App内容 core animation不是一个完整的绘图系统, ...

  8. 聊聊 if else 那些事

    从这周起,公司技术部每周五组织一次内部的技术分享,日常工作中,发现大家对if掌握的不是很好,今天先来聊聊if. 一.场景 简历的价格是根据专业的父Id设定的,下面根据简历Id获取简历的价格. /// ...

  9. Xcode-调试断点不能停在代码区终极解决方案

    转发 调试断点不能停在代码区终极解决方案:  http://mobile.51cto.com/iphone-390082.htm

  10. 拓扑图弹力布局呈现Flickr图片搜索结果

    十年前有值得分享的图片我都存在Flickr上,可惜yahoo收购了Flickr之后堕落​好多年,最近yahoo在梅姐带领下Flickr团队终于恢复了生机,个人免费存储空间扩充到了1T,界面用户体验也有 ...