https://github.com/chrishumboldt/Flickerplate


官网


  1. <link href="${baseURL}/themes/default/css/flickerplate.css" rel="stylesheet" type="text/css">
  2. <script src="${baseURL}/themes/default/js/hammer-v2.0.3.js"></script>
  3. <script src="${baseURL}/themes/default/js/flickerplate.js"></script>


引入上面3个   hammer-v是响应式用到的支持触控


  1. <div class="lb_container" style="height: 200px;">
  2. <ul>
  3. <c:forEach items="${requestScope.housephotoes}" var="housev">
  4. <li data-background="${housev.APPPHOTOURL}">
  5. </li>
  6. </c:forEach>
  7. </ul>
  8. </div>

上面是设置背景图片的  ,  官网只提供了设置普通文字 , 只是在li 下面加两个标签即可


<li data-background="image-url.jpg">
<div class="flick-title">Example Heading</div>
<div class="flick-sub-text">Sub Text</div>
</li>


最新版初始化

  1. new flickerplate({
  2. selector: '.lb_container',
  3. animation: 'transition-fade',
  4. autoFlick: false,
  5. dotAlignment: 'right',
  6. theme: 'dark'
  7. });


api 解释还没有中文


Name Default Options Description
animation transform-slide transform-slide, transform-slide, transition-fade, transition-slide Choose the animation type you want.
arrows true true, false Arrows are used to navigate back and forth between the flicks.
arrowsConstraint false true, false When you get to the end of the flicks pressing the next arrow will navigate you to the beginning again should you have a false constraint. The same applies to the previous arrow.
autoFlick true true, false Sets the flick to run automatically. A manual flick resets the delay.
autoFlickDelay 10 Set the delay (in seconds) between each auto flick.
dotAlignment center center, left, right Set the horizontal alignment of the dot navigation.
dots true true, false Dot navigation is used to indicate and navigate between the flicks.
position 1 Set the starting flick.
theme light light, dark Currently two options, light and dark. This will set the font colour, block text colour, arrows and dots to either dark or light.

但是有原版的解释  对照参考即可

属性/方法 类型 默认值 说明
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 动画切换方式,可选 transition-slide、transform-slide、jquery-slide、scroller-slide 4种
flick_position 整数 1
inner_width 布尔值 false
theme 字符串 light 设置主题,可选 light、dark 2种








基于 html5的 jquery 轮播插件 flickerplate的更多相关文章

  1. 自己写的一个jQuery轮播插件

    大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...

  2. 12款 jquery轮播插件

    Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...

  3. jQuery轮播插件SuperSlide【2016-10-14】

    [一.页面实现轮播效果] (1)效果下图可以自动轮播 (2)代码  autoPlay控制是否轮播 //banner轮播 $(".banner").slide({mainCell:& ...

  4. JQUERY 轮播插件

    闲来无事,写个轮播插件,项目中用到的时候就无需在写了,不然会累死宝宝的 废话少说 代码上 html部分 <div class="lunbo"> <ul> & ...

  5. 基于Jquery的banner轮播插件,简单粗暴

    新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...

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

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

  7. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

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

  8. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  9. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

随机推荐

  1. iOS: 偏好设置的详解和使用

    偏好设置的详解: 用途:主要用来存储用户系统的设备信息,但有的时候也可以在程序的任何地方用来存储数据,作为全局数据来访问,例如视图切换需要进行登录时. 偏好设置的写入: •很多iOS应用都支持偏好设置 ...

  2. go语言基础之工程管理和工作区介绍

    1.工程管理 在实际的开发工作中,直接调用编译器进行编译和链接的场景是少而又少,因为在工程中不会简单到只有一个源代码文件,且源文件之间会有相互的依赖关系.如果这样一个文件一个文件逐步编译,那不亚于一场 ...

  3. 服务器主机上RAID Card的Write Caching Policy

    在Cisco Server的DRAC中, 创建virtual drive时, 会看到下面的选项.   那么Write back, write through, write back bad BBU之间 ...

  4. 虚机启动失败-Event 1069

    Failover cluster中的一台虚机启动失败. 报错如下: 文字信息关键字如下: Event 1069; Event 21502; 0x80004005; Cluster resource ' ...

  5. phpstorm failed to create jvm:error code -6 解决办法 解决方法

    phpStorm 软件打开运行提示 failed to create JVM的解决办法. 修改文件 D:\Program Files (x86)\JetBrains\PhpStorm 7.1.3\bi ...

  6. jquery ajax方式直接提交整个表单

    $.ajax({ type: "POST", url: url, data: $('#form1').serialize(), success: function(msg){ al ...

  7. 不同版本(2.3,2.4,2.5,3.0)的Servlet web.xml 头信息

    不同版本(2.3,2.4,2.5,3.0)的Servlet web.xml 头信息 学习了:https://blog.csdn.net/z69183787/article/details/360080 ...

  8. 深入理解javascript闭包【整理】

    原文链接:http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html 英文原文:http://www.jibb ...

  9. JAVA实现zip压缩需要注意的问题

    近来对院社二维码平台进行2.0升级改造.于昨日踩到一个巨坑.特此记录... 需求源于院社编辑在批量下载二维码的时候,系统后台需要对所要下载的二维码进行重命名和zip打包压缩. 系统测试的时候发现:首次 ...

  10. PHP-汇总CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI

    什么是CGI 1.CGI是HTTP协议与其他外部应用程序之间的一个接口标准 2.CGI程序或脚本(CGI程序通过HTTP服务器去执行时, 必须在CGI程序中制定其执行程序的完整路径, 使SHELL能找 ...