基于 html5的 jquery 轮播插件 flickerplate
https://github.com/chrishumboldt/Flickerplate
<link href="${baseURL}/themes/default/css/flickerplate.css" rel="stylesheet" type="text/css">
<script src="${baseURL}/themes/default/js/hammer-v2.0.3.js"></script>
<script src="${baseURL}/themes/default/js/flickerplate.js"></script>
<div class="lb_container" style="height: 200px;">
<ul>
<c:forEach items="${requestScope.housephotoes}" var="housev">
<li data-background="${housev.APPPHOTOURL}">
</li>
</c:forEach>
</ul>
</div>
<li data-background="image-url.jpg">
<div class="flick-title">Example Heading</div>
<div class="flick-sub-text">Sub Text</div>
</li>
new flickerplate({
selector: '.lb_container',
animation: 'transition-fade',
autoFlick: false,
dotAlignment: 'right',
theme: 'dark'
});
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的更多相关文章
- 自己写的一个jQuery轮播插件
大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...
- 12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
- jQuery轮播插件SuperSlide【2016-10-14】
[一.页面实现轮播效果] (1)效果下图可以自动轮播 (2)代码 autoPlay控制是否轮播 //banner轮播 $(".banner").slide({mainCell:& ...
- JQUERY 轮播插件
闲来无事,写个轮播插件,项目中用到的时候就无需在写了,不然会累死宝宝的 废话少说 代码上 html部分 <div class="lunbo"> <ul> & ...
- 基于Jquery的banner轮播插件,简单粗暴
新手练习封装插件,觉着在前端这一块的轮播比较多,各种旋转木马一类的3D旋转,技术不够,所以封装了一个简单的banner轮播插件,功能也比较简单,就是左右向的轮播. 先挂地址https://github ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
随机推荐
- iOS: 偏好设置的详解和使用
偏好设置的详解: 用途:主要用来存储用户系统的设备信息,但有的时候也可以在程序的任何地方用来存储数据,作为全局数据来访问,例如视图切换需要进行登录时. 偏好设置的写入: •很多iOS应用都支持偏好设置 ...
- go语言基础之工程管理和工作区介绍
1.工程管理 在实际的开发工作中,直接调用编译器进行编译和链接的场景是少而又少,因为在工程中不会简单到只有一个源代码文件,且源文件之间会有相互的依赖关系.如果这样一个文件一个文件逐步编译,那不亚于一场 ...
- 服务器主机上RAID Card的Write Caching Policy
在Cisco Server的DRAC中, 创建virtual drive时, 会看到下面的选项. 那么Write back, write through, write back bad BBU之间 ...
- 虚机启动失败-Event 1069
Failover cluster中的一台虚机启动失败. 报错如下: 文字信息关键字如下: Event 1069; Event 21502; 0x80004005; Cluster resource ' ...
- phpstorm failed to create jvm:error code -6 解决办法 解决方法
phpStorm 软件打开运行提示 failed to create JVM的解决办法. 修改文件 D:\Program Files (x86)\JetBrains\PhpStorm 7.1.3\bi ...
- jquery ajax方式直接提交整个表单
$.ajax({ type: "POST", url: url, data: $('#form1').serialize(), success: function(msg){ al ...
- 不同版本(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 ...
- 深入理解javascript闭包【整理】
原文链接:http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html 英文原文:http://www.jibb ...
- JAVA实现zip压缩需要注意的问题
近来对院社二维码平台进行2.0升级改造.于昨日踩到一个巨坑.特此记录... 需求源于院社编辑在批量下载二维码的时候,系统后台需要对所要下载的二维码进行重命名和zip打包压缩. 系统测试的时候发现:首次 ...
- PHP-汇总CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI
什么是CGI 1.CGI是HTTP协议与其他外部应用程序之间的一个接口标准 2.CGI程序或脚本(CGI程序通过HTTP服务器去执行时, 必须在CGI程序中制定其执行程序的完整路径, 使SHELL能找 ...