jQuery Flickerplate 幻灯片 博客分类： jQuery jQueryFlickerplate幻灯片

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

---

下载