jQuery Flickerplate 幻灯片

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

---

下载