Flickerplate 是个轻量级 jQuery 插件,大小仅为 12 kb。它允许用户点击鼠标然后转换内容,非常容易使用,响应式,支持触摸设备
在线实例
使用方法
<div class="flicker-example">
<ul>
<li data-background="img/field.jpg">
<div class="flick-title">Flickerplate</div>
<div class="flick-sub-text">——小巧的jQuery幻灯片插件</div>
</li>
<li data-background="img/forest.jpg">
<div class="flick-title">可修改 Javascript 或 CSS</div>
<div class="flick-sub-text">查看参数,看看如何修改成你需要的效果</div>
</li>
<li data-background="img/frozen-water.jpg">
<div class="flick-title">触摸事件</div>
<div class="flick-sub-text">引入 jQuery Finger 插件可支持移动设备触摸事件</div>
</li>
</ul>
</div>
$(function() {
$('.flicker-example').flicker();
});
参数详解
参数 | 描述 | 默认值 |
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插件大全打包
|
内容
| HTML5+CSS3+PHP+jQuery等示例
|
大小
| 170M(300+个文件)
|
注意:示例只是当前的内容,【下载】的是全部jQuery插件一起打包后的文件。